Javascript

JAVASCRIPT
Bibliografa:
JavaScript. The Definitive Guide 2 22 2OReilly.
Diseo de pginas web interactivas con
JavaScript 2 Ed. 2 22 2Ra-Ma
Professional JavaScript 2 22 2Wrox
Luis Marco Noviembre 2000
Rev. Abril 2006
Bibliografa recomendada
JavaScript The Definitive Guide
David Flanagan
Editorial Oreilly
JavaScript Bible 3rd. Edition
Dany Goodman
Editorial IDG Books
Professional JavaScript
Varios autores
Editorial Wrox
Pure JavaScript
Editorial SAMS
Herramientas necesarias
Editor de texto ASCII
Notepad de Windows
UltraEdit 32
vi/vim
...
Navegador web con soporte JavaScript
Microsoft Internet Explorer 4.0+
Netscape Navigator 4.0x+
Opera
Mozilla / Mozilla Firefox
...
Conocimientos previos de HTML
Introduccin (I)
JavaScript es un lenguaje de programacin creado
por Netscape.
Objetivo: Integrarse en HTML y facilitar la creacin
de pginas interactivas.
El cdigo JavaScript no necesita ser compilado, es
el propio navegador el que se encarga de
interpretarlo.
Introduccin (II)
Con JavaScript se pueden desarrollar programas
que se ejecuten en el navegador (cliente) con el
objetivo de efectuar determinadas operaciones sin
acceder al servidor web.
MSIE Soporta una variante de JavaScript, JScript,
similar pero no compatible al 100%.
Caractersticas
No tipado.
Basado en objetos.
JavaScript NO ES Java.
En la actualidad, pocos navegadores no disponen
de soporte de JavaScript.
Un lenguaje de programacin es fuertemente tipado si el compilador comprueba que
no se violan los tipos de datos.
Un lenguaje que no es fuertemente tipado se dice que no est tipado.
Versiones de JavaScript / JScript
JavaScript 1.3 - JScript 5.0 1999 Microsoft Internet Explorer 5.0
JavaScript 1.3 JScript 5.6 2002 Microsoft Internet Explorer 6.0
JavaScript 1.5 2001 Netscape Navigator 6.0
JavaScript 1.3 JScript 5.5 2001 Microsoft Internet Explorer 5.5
Versin Ao Navegador
Capacidades de JavaScript
Control de la visualizacin y contenido de los
documentos html.
Control de objetos del browser.
Interactividad mediante formularios html.
Interactividad con el usuario.
Lectura y Escritura de cookies.
Temporizar acciones
Etc...
Qu no puede hacer JavaScript
JS no tiene capacidades grficas, excepto la
habilidad de generar dinmicamente documentos
html con imgenes, tablas, formularios, ...
Por razones de seguridad, el JS cliente no tiene
acceso al sistema de ficheros local.
Tampoco tiene soporte de comunicaciones, excepto
las que proporciona el navegador.
Usando JavaScript en HTML
JavaScript puede ser embebido en un documento
HTML de dos maneras:
1. Como funciones y sentencias usando las elemento
<script> ... </script>.
2. Como manejadores de eventos usando eventos
HTML.
Etiqueta <SCRIPT>
Para definir el inicio de cdigo se escribir una de
las sentencias:
<script language="JavaScript"> ... </script>
<script language="JavaScript1.3"> ... </script>
<script> ... </script>
Ejemplo:
<html><body>
<script> document.write("HOLA MUNDO); </script>
</body></html>
Determinar versin JavaScript
<script language=JavaScript1.0>
var version=1.0;
</script>
var version=1.1;
</script>
var version=1.2;
</script>
var version=1.3;
</script>
Determinar versin JScript
<script>
document.write( Versin de JScript en Internet Explorer: +
ScriptEngineMajorVersion() +
"." +
ScriptEngineMinorVersion() );
</script>
Ubicacin del cdigo
El cdigo JS se puede colocar en cualquier lugar del
documento HTML, aunque lo ms usual es
encontrarlo en la seccin <HEAD> y, en ocasiones,
en la seccin <BODY>.
JS ignora los espacios, tabuladores y lneas en
blanco que aparezcan entre sentencias.
Nota: Hay que tener presente que JS es un lenguaje
Case Sensitive.
Esconder cdigo JS
Cuando el cliente utiliza un browser que no entiende
scripts, ste mostrar todo el cdigo que se
encuentre entre las etiquetas <script> ... </script>
como texto plano.
Este efecto se puede evitar encerrando el cdigo JS
entre etiquetas de comentarios HTML: <!-- -- >.
Etiqueta <NOSCRIPT>
HTML dispone tambin de las etiquetas
<noscript> ... </noscript>.
Entre ellas se incluir nicamente cdigo HTML.
Comentarios en JS
Para introducir comentarios en JS, podemos utilizar
dos tcnicas diferentes:
1. Comentarios de una sola lnea: //...
2. Comentarios de bloque: /* ... */
Bloques de instrucciones
Los bloques de instrucciones en JS se agrupan bajo
llaves:
function miFuncion () {
var elAlumno=Amadeo";
var laAsignatura=Fsica";
alert (elAlumno + ha aprobado + laAsignatura);
}
Terminacin de instrucciones
El final de una sentencia en JS se indica con punto y
coma.
Su uso no es obligatorio cuando cada lnea contiene
una nica sentencia JS.
Necesario cuando en una misma lnea existen varias
sentencias o cuando una sentencia ocupa varias
lneas (al final).
No existe lmite en cuanto a longitud.
Nombres de identificadores (I)
El primer carcter debe ser siempre una letra, guin
de subrayado _ o smbolo del dlar $.
Los dems caracteres pueden ser letras, nmeros,
el guin de subrayado o smbolo de dlar, sin
espacios entre ellos.
JS es Case Sensitive !!!!!
Nombres de identificadores(II)
El nombre no puede coincidir con una palabra
reservada del lenguaje.
Tampoco se deben definir identificadores que
empiecen por dos subrayados ya que la
implementacin interna de JS a menudo usa esta
notacin.
Palabras reservadas de JS
abstract boolean break byte case catch char class
const continue default do double else extends false
final finally float for function goto int implements
input in instance of interface long native new null
package private protected public return short static super
switch synchronized this throw throws transient true try
var val while with
abstract boolean break byte case catch char class
const continue default do double else extends false
final finally float for function goto int implements
input in instance of interface long native new null
package private protected public return short static super
switch synchronized this throw throws transient true try
var val while with
Tipos de datos
JS puede manejar cuatro tipos de datos distintos:
1. Datos numricos.
2. Cadenas de texto.
3. Valores booleanos.
4. Valores nulos.
Valores numricos
A diferencia de otros lenguajes, en JS no se hace
distincin entre valores enteros y de coma flotante.
En JS se representan (internamente) todos como
valores de coma flotante.
El rango aceptado est entre:
1.7976931348623157 x 10
308
5 x 10
-324
Tipos de literales numricos
Enteros
Octales: Empiezan con el dgito 0.
Hexadecimales: Empiezan con 0x 0X.
Coma flotante: La sintaxis es
[dgitos][.dgitos][(E|e)[(+|-)]dgitos]
Ej.: 3.14, .333333333,
6.02e+23, 1.478223E-32
Valores numricos Especiales
Infinity , Infinity para valores numricos que
sobrepasan los lmites de JS (x / 0).
NaN para operaciones que esperan devolver un
valor numrico y esto no ocurre (0 / 0).
Constantes numricas especiales
JS 1.1 define las constantes numricas:
(*) Slo MSIE 4.0+ y nuevos navegadores.
Valor especial infinito negativo. Number.NEGATIVE_INFINITY (*)
Valor especial infinito positivo. Number.POSITIVE_INFINITY (*)
El menor nmero. Number.MIN_VALUE
El mayor nmero representable. Number.MAX_VALUE
Significado Constante
Cadenas de texto
En JS el texto se delimita mediante comillas dobles
o simples y pueden contener cualquier caracter.
Ejemplo: var nombre = Danny Goodman";
Como norma, las comillas simples se utilizarn
dentro de textos encerrados entre comillas dobles, y
viceversa.
Trabajando con cadenas (I)
Las cadenas de texto pueden concatenarse entre s,
con valores numricos y/o booleanos:
Operador suma +.
Determinar la longitud de cadena:
Propiedad length.
Obtener subcadenas:
Mtodo substring (inicio, fin).
Mtodo substring (inicio).
Mtodo substr (inicio, long).
Mtodo substr (inicio).
Trabajando con cadenas (I)
Obtener el carcter que ocupa la posicin n:
Mtodo charAt (n).
Encontrar posicin de la primera ocurrencia de una
subcadena de una cadena:
Mtodo indexOf (subcadena [, desde]). Si no la encuentra
devuelve el valor -1;
La ltima ocurrencia:
Mtodo lastIndexOf (subcadena [, desde]).
Valores booleanos
Por booleanos se entienden los valores:
true
false
Utilizados, generalmente, para resultados en
comparaciones.
Valores nulos
Valor nulo, en JS null, indica la inexistencia de
valor.
En JS null no es lo mismo que cero (0).
En ocasiones es conveniente inicializar las variables
como null para indicar explcitamente que no tienen
valor alguno.
Valor Undefined
Una variable que no existe, no est definida o no
tiene valor, o bien una propiedad o mtodo de un
objeto inexistente tienen valor undefined.
Este valor puede utilizarse en comparaciones.
Declaracin de variables (I)
La palabra clave que declara una variable en JS es
var nombre-variable.
Al ser JS un lenguaje no tipado, no se declaran tipos
de datos junto con la palabra clave var.
Antes de usar una variable es aconsejable
declararla.
Declaracin de variables (II)
Se permite la declaracin de mltiples variables para
una misma sentencia var:
var impTotal, impParcial;
Se puede dar valor inicial a las variables a la vez
que se declaran:
var razonSocial="AEAT";
var impTotal=0, impParcial=500;
var a=b=c=0
Declaracin de variables (III)
Ejemplos de declaraciones vlidas:
var nombre;
var Direccin;
var localidad_de_nacimiento;
Ejemplos de declaraciones invlidas:
var 1apellido;
var localidad de nacimiento;
var new;
null vs undefined
EN JS 1.1 y posteriores, se puede distinguir entre
valores null y valores undefined a travs del
operador typeof.
typeof devuelve "object" o "undefined".
Ejemplo:
var variableSinDefinir;
var tipo = typeof variableSinDefinir;
document.write() del browser
El browser, o navegador, dispone de un objeto
document, el cual, adems de otros mtodos y
propiedades, proporciona el mtodo write() para
escribir cadenas en la ventana del navegador.
Sintaxis:
document.write (cadena);
Depurar errores JavaScript
En muchos navegadores la existencia de errores se
notifican en la lnea de estado.
En Netscape Navigator/ Mozilla / Mozilla Firefox se
puede comprobar el error producido tecleando
javascript: en la url del navegador.
En MSIE los errores se notifican mediante un icono
de alerta en la lnea de estado, y haciendo doble
clic en l se puede ver el tipo de error.
Prctica
Caracteres escapados
Dentro de una cadena podemos introducir
caracteres que representan funciones especiales:
salto de lnea, comilla doble, salto de lnea,
Estos caracteres se introducen en la cadena
mediante el carcter de escape \, seguido del
carcter a escribir.
Lista de caracteres escapados
Cdigo
escapado
Carcter visible
\b Caracter anterior
\f Salto de pgina
\n Salto de lnea
\r Retorno de carro
\t Tabulador
\\ Caracter \
\' Comilla simple
\" Comilla doble
\NNN Cdigo de caracter del juego Latin-
1, en octal
\xNN Cdigo de caracter del juego Latin-
1, en hexadecimal.
\uNNNN Cdigo de caracter del juego
Unicode, en hexadecimal.

Cdigo
escapado
Carcter visible
\b Caracter anterior
\f Salto de pgina
\n Salto de lnea
\r Retorno de carro
\t Tabulador
\\ Caracter \
\' Comilla simple
\" Comilla doble
\NNN Cdigo de caracter del juego Latin-
1, en octal
\xNN Cdigo de caracter del juego Latin-
1, en hexadecimal.
\uNNNN Cdigo de caracter del juego
Unicode, en hexadecimal.

Ejemplo de cdigos escapados
var navIE="Est usando como navegador Internet
Explorer. \nSi desea continuar pulse Aceptar".
var navNs="Navegador actual: \"Netscape
Navigator\". \nSi desea continuar pulse Aceptar".
mbito de las variables
El mbito de las variables puede ser global o local.
Globales son aquellas definidas fuera del mbito de
una funcin, a las que se puede acceder desde
cualquier parte del cdigo.
Locales las definidas dentro del mbito de una
funcin y slo accesibles desde su mbito local.
Ejemplo de mbito
var cod-art = "110-Estantera";
function mostrar() {
var importe = 1500;
cod-art = "Sin existencias";
alert("El importe es: + importe);
alert("El cd-art.:" + cod-art);
}
alert("Ahora cd-art vale: + cod-art);
Operadores
Los operadores en JS pueden dividirse en varios
grupos funcionales:
1. Operadores aritmticos.
2. Operadores lgicos.
3. Operadores de comparacin.
4. Operador condicional.
5. Operadores de bit.
6. Operadores de asignacin.
7. Otros operadores.
Operadores aritmticos
- Negacin unaria
-- Decremento:
Predecremento y
Posdecremento
++ Incremento: Preincremento
y Posincremento
% Mdulo
/ Divisin
* Multiplicacin
- Resta
+ Suma
-
+
Operadores lgicos
! Negacin lgica NOT
&& Suma lgica AND
|| Producto lgico OR
NOTA: Si la parte izquierda de una condicin AND es falsa no
se sigue evaluando la condicin. Se devuelve false.
Si la parte izquierda de una condicin OR es cierta, no se sigue
evaluando la condicin. Se devuelve true.
-
+
Operadores de comparacin
!== No identidad
=== Identidad
<= Menor o igual que
>= Mayor o igual que
< Menor que
> Mayor que
!= Desigualdad
== Igualdad
-
+
Reglas de igualdad
Con el operador de igualdad == considerar las
reglas de comparacin siguientes:
1. Si uno de los valores es null y el otro es undefined se
devuelve true.
2. Si los tipos de los dos valores a comparar difieren, se
intenta convertir uno de ellos al tipo del otro:
2.1. Si uno es numrico y el otro cadena, se convierte la
cadena a numrico.
2.2. Si uno es numrico y el otro booleano, true se convierte
a 1 y false a 0.
2.3. Si uno es un objeto y el otro es un nmero o cadena, se
convierte el objeto a su equivalente primitivo (Mtodos
toString() o valueOf()).
Operador condicional
Operador condicional ?:.
Es el nico operador ternario en JS.
Sintaxis:
var r = (condicin) ? Si_true : Si_false;
Su expresin es equivalente a la de una sentencia
condicional if sencilla, pero ms breve.
Ejemplo ?:
var saludo = "Hola " + (nombre!=null) ? nombre : "ser
annimo";
Equivalente a:
var saludo="Hola ";
if (nombre != null)
saludo += nombre;
else
saludo += "ser annimo";
Operadores de bit
<< Desplazamiento izq.
& Operador AND
~ Negacin NOT
>>> Derecha con ceros
>> Desplazamiento der.
^ Operador XOR
| Operador OR
NOTA: Los operadores <<, >> y >>> mueven, bit a bit, el primer
operando la cantidad especificada en el segundo operando (0..31).
Desplazar a la izquierda equivale a multiplicar por 2. Desplazar a la
derecha a dividir por dos.
-
+
Operadores de asignacin
Operador Ejemplo Equivalente
+= a += b a = a + b
-= a -= b a = a - b
*= a *= b a = a * b
/= a /= b a = a / b
%= a %= b a = a % b
<<= a <<= b a = a << b
>>= a >>= b a = a >> b
>>>= a >>>= b a = a >>> b
&= a &= b a = a & b
|= a |= b a = a | b
^= a ^= b a = a ^ b
Operador Ejemplo Equivalente
+= a += b a = a + b
-= a -= b a = a - b
*= a *= b a = a * b
/= a /= b a = a / b
%= a %= b a = a % b
<<= a <<= b a = a << b
>>= a >>= b a = a >> b
>>>= a >>>= b a = a >>> b
&= a &= b a = a & b
|= a |= b a = a | b
^= a ^= b a = a ^ b
El operador bsico de asignacin es =.
La sintaxis de los operadores de asignacin: a op= b;
Otros operadores: typeof
Operador typeof. Es un operador unario que
devuelve, en forma de cadena de texto, el tipo del
objeto nombrado.
Posibles valores devueltos son: "number", "string",
"boolean", "object", "function" o "undefined".
Ejemplo:
var mensaje = (typeof nombre == "string") ? "El nombre es: +
nombre : "No hay nombre asignado";
alert (mensaje);
Otros operadores: new
Objetos y Arrays no se pueden crear directamente
dando valor a la variable.
El operador new permite crear estos objetos.
Sintaxis: new constructor()
Ejemplos:
var fecha = new Date();
var meses = new Array();
Funciones
Conjunto de sentencias JS que realizan alguna tarea
especfica y, opcionalmente, devuelven un valor.
Elementos de una funcin:
1. El identificador de funcin: function.
2. El nombre de la funcin.
3. La lista de argumentos.
4. Conjunto de sentencias que la definen.
Definicin de funciones
Las funciones pueden definirse en cualquier parte
de la pgina html.
Habitualmente se definen en la seccin <head>, por
claridad.
Sintaxis:
function nombre (par1, par2, ...) {
...
[ return expresin; ]
}
Ejemplo de funcin
function elevar (num, exp) {
var resul = 1;
for (var i = 0; i < exp; i++)
resul *= num;
return resul;
}
Evento onclick()
A los elementos de un formulario, p.ej. botones, se
les puede asociar eventos para interaccionar con el
usuario.
Uno de ellos, muy habitual, es el evento onclick, el
cual se dispara al hacer clic con el ratn sobre l.
Sintaxis:
<input type=button name=miBoton
onclick ="miFuncion()">
Funcin eval()
Cualquier sentencia JS puede ejecutarse o
evaluarse a travs de la funcin eval().
Sintaxis: eval (sentencia-javaScript);
Ejemplo:
eval(document.write(a+b));
Acceso a elementos de <form>
Forma general de acceder a un elemento:
document.nombreForm.nombreElemento.propiedad
Ejemplo:
document.calc.visor.value=5;
document
document
<form name=calc method=action=>
</form>
<input type=text name=visor value=..>
Prctica
Sentencia bsica if
Sintaxis:
if (expresin)
sentencia;
if (expresin) {
conjunto de sentencias;
}
Ejemplos sentencia bsica if
if ( nombre == null )
alert ("Nombre vaco");
if ( email == null || email == "" ) {
email = "sin definir";
alert (Por favor, especifique un e-mail");
}
Sentencia if - else
Sintaxis:
if (expresin)
sentencia1;
else
sentencia2;
NOTA: Cuando se anidan varias sentencias if con
clusulas else, hay que poner especial cuidado con
los bloques de sentencias entre llaves.
Seleccin por casos: switch
JS 1.2 proporciona la sentencia switch para seleccin entre
casos.
Sintaxis:
switch (expresin) {
case valor1:
sentencias-valor1;
break;
case valor2:
sentencias-valor2;
break;
default:
sentencias-defecto;
break;
}
Ejemplo de switch
function convierte (x) {
switch (typeof x) {
case 'number':
return x.toString(16);
case 'string':
return + x + ;
case 'boolean':
return x.toString().toUpperCase();
default:
return x.toString();
}
}
Por qu en el ejemplo no existen sentencias break; ?
Por qu en el ejemplo no existen sentencias break; ?
Bucle while
Sintaxis:
while (expresin)
sentencia;
El bucle while se ejecutar siempre que la expresin
se evale a true.
Una iteracin infinita: while (true);
Ejemplos while
var contador = 0;
while (contador < 10)
document.write ((contador++) + "<br>");
var contador = 0;
while (contador < 10)
document.write ((++contador) + "<br>");
1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
Postincremento
Preincremento
Bucle do / while
La expresin es verificada al final del bucle, con lo
que al menos una vez se ejecutar su cuerpo.
Sintaxis:
do
sentencia;
while (expresin);
Bucle for (I)
Representa la iteracin ms completa.
En l se puede realizar tanto la inicializacin, la
verificacin y la actualizacin del/los contador/es.
Sintaxis:
for (inicializaciones; condicin; actualizaciones)
sentencia;
Bucle for (II)
Esta sentencia es equivalente a:
inicializacin;
while (condicin) {
sentencia;
incremento;
}
Ejemplo:
for (var cont = 0; cont < 10; cont++)
document.write (cont + <br>);
Bucle for / in
Recorre todas las propiedades de un objeto.
Sintaxis:
for (variable in objeto)
sentencia;
Ejemplo:
for (elem in window)
document.write (" propiedad: " + elem + "valor: " +
window[elem] + "<br>");
Etiquetas
JS 1.2 proporciona el etiquetado de sentencias.
Sintaxis: etiqueta: conjunto_de_sentencias;
Ejemplo:
inicio:
while (token != null) {
...
}
Uso con sentencias break y continue.
Sentencia break
Causa la salida inmediata del bucle o del switch que
la contiene.
Sintaxis:
break;
break etiqueta;
Ejemplo de sentencia break
bucleExt:
for (var i = 0; i < 10; i++) {
bucleInt:
for (var j = 0; j < 10; j++) {
if (j > 3) break;
if (i == 2) break bucleInt;
if (i == 4) break bucleExt;
document.write ("<br>Valores: + i + " " + j);
}
}
document.write ("<br>FINAL: " + i + " " + j);
Valores: 0 0
Valores: 0 1
Valores: 0 2
Valores: 0 3
Valores: 1 0
Valores: 1 1
Valores: 1 2
Valores: 1 3
Valores: 3 0
Valores: 3 1
Valores: 3 2
Valores: 3 3
FINAL: 4 0
Valores: 0 0
Valores: 0 1
Valores: 0 2
Valores: 0 3
Valores: 1 0
Valores: 1 1
Valores: 1 2
Valores: 1 3
Valores: 3 0
Valores: 3 1
Valores: 3 2
Valores: 3 3
FINAL: 4 0
Salida del ejemplo anterior
bucleExt:
for (var i = 0; i < 10; i++) {
bucleInt:
for (var j = 0; j < 10; j++) {
if (j > 3) break;
if (i ==4 ) break bucleExt;
}
}
bucleExt:
for (var i = 0; i < 10; i++) {
bucleInt:
for (var j = 0; j < 10; j++) {
if (j > 3) break;
if (i ==4 ) break bucleExt;
}
}
Sentencia continue
Sintaxis:
continue;
continue etiqueta;
Usada slo en bucles while, for y for/in.
La sentencia continue provoca que la iteracin en
curso termine en el acto y comience el bucle con la
siguiente.
La sentencia vaca
En JS, una sentencia vaca se especifica con ;
Ejemplo:
//Inicializar un array
for (i = 0; i < a.length; a[i++] = 0) ;
Precaucin:
if ( a == 0 || b == 0 ) ;
alert ("la variable a o b tienen valor cero");
Prctica
Dilogos de ventana
Existen, en JS, tres tipos de ventanas:
Alertas
Confirmaciones
Entradas de usuario
Las dos ltimas son funciones que devuelven un
valor.
Los tres tipos son mtodos del objeto window.
Son ventanas modales (excepto en Netscape bajo
plataformas UNIX !!).
Alertas: alert()
Visualiza un mensaje al usuario.
El nico botn disponible es el de aceptar.
Sintaxis: alert (cadena-mensaje);
El mensaje en texto plano. Se admiten espacios,
saltos de lnea (\n, \r), algunos caracteres
escapados y caracteres de puntuacin.
Ejemplo alert()
Confirmaciones: confirm()
Similar a las ventanas alert(), excepto que
proporcionan dos botones: Aceptar y Cancelar.
El dilogo devolver true si se pulsa en Aceptar y
false en caso contrario.
Sintaxis:
valor = confirm (cadena-mensaje);
Ejemplo confirm() (I)
Devuelve true
Devuelve
false
Ejemplo de confirm (II)
var r=(confirm("Pulsa lo que quieras!!!")) ? "Bien, has pulsado Aceptar :
"Oooops, has pulsado Cancelar;
alert(r);
var r=(confirm("Pulsa lo que quieras!!!")) ? "Bien, has pulsado Aceptar :
"Oooops, has pulsado Cancelar;
alert(r);
Entradas: prompt()
Permiten la entrada, por teclado, de datos de
usuario.
Sintaxis:
valor = prompt(mensaje, valorInicial);
Proporciona dos botones: Aceptar y Cancelar.
Pulsando Aceptar se devolver el valor introducido.
Pulsando Cancelar se devolver null, con
independencia del valor introducido.
Ejemplo prompt()
Devolver null
Valor inicial
Entrada de datos
usuario
Devolver la entrada de
datos
Anidamiento de funciones
En JS 1.2 las funciones pueden anidarse.
El mbito de las funciones anidadas es el de su
definicin.
Ejemplo:
function hipotenusa (a, b) {
function cuadrado (x) { return x*x; }
return Math.sqrt(cuadrado(a) + cuadrado(b));
}
Argumentos de una funcin
Una funcin define, internamente un objeto especial
llamado arguments.
Este objeto se define como un array que contiene
los argumentos pasados en la invocacin a la
funcin.
Como array que es, se puede verificar su longitud
con la propiedad length.
Ejemplo de arguments
function max() {
var m=Number.NEGATIVE_INFINITY;
for (var i=0; i<arguments.length; i++)
if (arguments[i]>m) m=arguments[i];
return m; //El mayor.
}
Arrays
Array (o vector): Tipo de datos que almacena piezas
de informacin.
Cada elemento del array es nombrado por su ndice
o apuntador.
Como JS es un lenguaje no tipado, los elementos de
un array puede ser de cualquier tipo.
Incluso un mismo array puede contener distintos
tipos de datos, incluso arrays !!!!
Creacin de Arrays
En JS un array es un objeto.
Como tal se declaran con el operador new seguido
del constructor Array().
Sintaxis:
var a = new Array( [tamao | elementos] );
Constructor Array()
Existen tres formas de invocar al constructor Array():
1. Sin parmetro alguno: Define un array vaco.
2. Con un nico parmetro entero: Define su tamao.
3. Con una lista de parmetros: Lo inicializa.
La longitud de un array puede obtenerse con la
propiedad length, teniendo en cuenta que sus
elementos empiezan en el ndice 0.
Inicializaciones de un Array
var miArray = new Array();
Define un array vaco.
var miArray = new Array(5);
Define un array con 5 elementos, desde 0 hasta 4.
var miArray = new Array(5, 4, 3);
Define un array de 3 elementos. Contenido:
miArray[0]=5;
miArray[1]=4;
miArray[2]=3;
Acceso a elementos
El acceso a los elementos individuales de un array
se efecta con el operador [ ].
Sintaxis: variable-array[ndice];
Ejemplos:
valor = a[0];
a[1] *= 3.14;
a[++i]="Hola";
a[a[i]] = a[0];
a[MODELO]="130";
Agregar elementos a un array
Los arrays en JS son dinmicos.
En tiempo de ejecucin se puede aumentar el
nmero de elementos, simplemente definiendo para
el array el nuevo elemento.
JS asigna la memoria dinmicamente slo para los
elementos definidos.
Arrays multidimensionales
JS no soporta verdaderos arrays
multidimensionales.
La aproximacin que se permite en JS es definir
arrays cuyos elementos sean a su vez arrays.
El acceso a los elementos particulares se realizara
como matriz[x][y].
Creacin multidimensional
Ejemplo:
var matriz = new Array([1, 2], [4, 5], [6, 7]);
Longitud total del array:
matriz.length; Devuelve 3.
Acceso a los elementos:
matriz[0]; Devuelve 1,2.
matriz[0][1] Devuelve 2.
Mtodos del objeto Array
toSource() toString() shift()
unshift() pop() push()
splice() slice() concat()
sort() split() join()
Aplicados al objeto array:
variable-array.metodo();
Aplicados al objeto array:
variable-array.metodo();
Mtodo join()
Convierte y devuelve los elementos de un array a un
string concatenados mediante el separador coma.
Se puede especificar un parmetro opcional, de tipo
string, que servir de separador de elementos del
nuevo string.
Ejemplo:
var a = new Array(1, 2, 3);
var s = a.join(); s==1, 2, 3
var s = a.join(..., ); s==1..., 2..., 3
Mtodo split()
Devuelve un array a partir de una cadena de
literales separados por comas, o por el delimitador
que se indique como parmetro.
Ejemplo:
var a=Lunes|Martes|Mircoles;
var s=a.split(|);
s[0]==Lunes
s[1]==Martes
s[2]==Mircoles
Mtodo sort()
Ordena un Array en forma ascendente.
Ejemplo:
var a = new Array(A, F, B);
a.sort() { A, B, F }
Mtodo reverse()
Funciona de forma anloga a sort() pero ordena el
array en forma descendente.
Ejemplo:
var a = new Array(A, F, B);
a.reverse() { F, B, A }
Mtodo concat()
Crea y devuelve un array conteniendo el array
original ms el que se desea concatenar.
Ejemplo:
var a = new Array (1, 2, 3);
var b=a.concat(new Array(4, 5))
b== { 1, 2, 3, 4, 5}
Mtodo slice()
Devuelve un subarray.
Ejemplo:
var a = new Array(1, 2, 3, 4, 5);
a.slice(0, 3) Devuelve { 1, 2, 3 }
a.slice(3) Devuelve { 4, 5 }
Mtodo splice()
Elimina elementos de un array.
Modifica el array y devuelve los elementos
eliminados.
Ejemplo:
var a = new Array(1, 2, 3, 4, 5, 6, 7, 8)
a.splice(4)
Devuelve { 5, 6, 7, 8 }
a=={ 1, 2, 3, 4}
Mtodos push() / pop()
Son dos mtodos que implementan el
comportamiento tpico de una pila.
push(valor) introduce, dentro de un array, un
elemento en la cima de la pila (ltimo elemento del
array).
pop() extrae un elemento desde la cima de la pila
(ltimo elemento del array).
Mtodos unshift() / shift()
Funcionan de forma similar a push() / pop().
unshift(valor) aade elementos al principio del
array, desplazando los existentes.
shift() elimina y devuelve el primer elemento del
array.
Ejemplo:
var a = new Array();
a.unshift(1); a=={1}
a.unshift(22); a=={22, 1}
a.shift(); Devuelve 22.
Mtodos toString()/toSource()
toString() aplicado a un array, convierte cada uno
de sus elementos a un string, separado por comas.
Es idntico a join().
Excepcin en Nav. 4/ Mozilla / Mozilla Firefox:
Cuando <script language=JavaScript1.2> la cadena
aparece encerrada entre corchetes [1, 2, 3].
Solucin en JavaScript1.3 para dichos
navegadorestoSource().
Prctica
Modos de incluir JS en html
<script> ... </script>
<script src=".../../comun.js"></script>
<script archive="util.jar"
src="comun.js"></script>
En URLs: <a href="javascript:cdigo-JS;"> ... </a>
Como manejadores de eventos.
Consideraciones .js
1. Un fichero .js es cdigo puro JavaScript, sin las
etiquetas <script> </script> o cualquier otra etiqueta
html.
2. Entre las etiquetas <script src=..> y </script> no
debe de ir cdigo alguno. Si existiera, se ignora.
El atributo ARCHIVE Netscape
Este atributo especifica archivos .jar (Java Archives).
Los ficheros .jar son ficheros comprimidos. En
ocasiones, contienen otros ficheros auxiliares como
firmas digitales.
Utilidad: Si se desarrollan varios ficheros .js, puede
resultar til almacenarlos juntos en un archivo
comprimido, y usar slo el que interese en cada
momento (nombrado por el src=...).
JavaScript en URLs
Ejemplos URL:
<a href="javascript: alert('Hola Mundo');"> Saludo </a>
<a href="javascript: calculaTotal();"> Calcular el Total</a>
Ejemplos en manejadores de eventos:
<input type=button name=miBoton value=Calcular
onclick=calculaTotal();>
Ejecucin de programas JS
Si ubicamos cdigo JS en la seccin <head>, p.ej.,
ste no podr acceder a elementos de la seccin
<body> hasta que no hayan sido definidos, ya que el
flujo de ejecucin es secuencial.
Si el cdigo intenta acceder a elementos todava no
definidos se producir un error (undefined).
Eventos onLoad() y onUnload()
Ambos eventos se definen en la etiqueta HTML
<body>, <frame>, <frameset> o <iframe>.
El evento onLoad() se disparar cuando la pgina
se descargue y se escriba completamente.
El evento onUnload() cuando el navegador
abandone la pgina.
El entorno del lado cliente JS
El desarrollo de JS del lado cliente (client-side
JavaScript) realiza un uso intensivo de tres
caractersticas del entorno del navegador:
1. El objeto global Window.
2. La jerarqua de objetos del lado cliente.
2. El modelo de programacin guiado por eventos.
El objeto Window
El objeto Window representa la ventana (o frame)
que visualiza el documento.
Define propiedades y mtodos que permiten
manipular las ventanas del navegador.
Referencias al objeto Window: window o self.
Jerarqua de objetos
Window
Window
self, window,
parent, top
self, window,
parent, top
navigator
navigator
frames [ ]
frames [ ]
location
location
history
history
document
document
plugins [ ]
plugins [ ]
mimeTypes [ ]
mimeTypes [ ]
forms [ ]
forms [ ]
anchors [ ]
anchors [ ]
links [ ]
links [ ]
images [ ]
images [ ]
applets [ ]
applets [ ]
embeds [ ]
embeds [ ]
elements [ ]
array de objetos de
Formulario (Form):
Button
Checkbox
FileUpload
Hidden
Password
Radio
Select
Submit
Text
TextArea
elements [ ]
array de objetos de
Formulario (Form):
Button
Checkbox
FileUpload
Hidden
Password
Radio
Select
Submit
Text
TextArea
1.1
options [ ]
array de objetos
options
options [ ]
array de objetos
options
Familia de
Netscape
Navigator
Objetos plugins y mimeTypes
document.write("<b>plugins instalados: "+navigator.plugins.length+"</b><br>");
for (var i=0; i<navigator.plugins.length; i++)
document.write(navigator.plugins[i].name+"<br>");
document.write("<hr>");
document.write("<b>mimeTypes soportados: "+navigator.mimeTypes.length+"</b><br>");
for (var i=0; i<navigator.mimeTypes.length; i++)
document.write(navigator.mimeTypes[i].type+"<br>");
document.write("<b>plugins instalados: "+navigator.plugins.length+"</b><br>");
for (var i=0; i<navigator.plugins.length; i++)
document.write(navigator.plugins[i].name+"<br>");
document.write("<hr>");
document.write("<b>mimeTypes soportados: "+navigator.mimeTypes.length+"</b><br>");
for (var i=0; i<navigator.mimeTypes.length; i++)
document.write(navigator.mimeTypes[i].type+"<br>");
Ejemplo plugins[] en Netscape
plugins instalados: 16
Microsoft Windows Media Services
Shockwave Flash
Adobe SVG Viewer Plugin
NPSnpy Dynamic Link Library
RealPlayer(tm) G2 LiveConnect-Enabled Plug-In (32-bit)
Adobe Acrobat
Netscape Default Plug-in
Java Plug-in
Java Plug-in
Java Plug-in
Java Plug-in
Microsoft Reader
Windows Media Player Plug-in Dynamic Link Library
Beatnik Player V2.0.5.2
NPAVI32 Dynamic Link Library
LiveAudio
plugins instalados: 16
Microsoft Windows Media Services
Shockwave Flash
Adobe SVG Viewer Plugin
NPSnpy Dynamic Link Library
RealPlayer(tm) G2 LiveConnect-Enabled Plug-In (32-bit)
Adobe Acrobat
Netscape Default Plug-in
Java Plug-in
Java Plug-in
Java Plug-in
Java Plug-in
Microsoft Reader
Windows Media Player Plug-in Dynamic Link Library
Beatnik Player V2.0.5.2
NPAVI32 Dynamic Link Library
LiveAudio
Ejemplo mimeTypes en Netscape
mimeTypes soportados: 523
application/x-drm
image/svg-xml
image/svg
application/x-npsnpy-plugin
*
application/x-java-bean;version=1.2.1
application/x-java-applet;version=1.2.1
application/x-java-bean;version=1.3
application/x-java-applet;version=1.3
application/x-java-bean;jpi-version=1.3.1
application/x-java-applet;jpi-version=1.3.1
mimeTypes soportados: 523
application/x-drm
image/svg-xml
image/svg
application/x-npsnpy-plugin
*
application/x-java-bean;jpi-version=1.3.1
application/x-java-applet;jpi-version=1.3.1
application/x-java-bean
application/x-java-applet
application/x-npebshp
application/asx
audio/x-rmf
audio/rmf
audio/nspaudio
audio/x-nspaudio
...
...
...
...
...
application/x-java-bean
application/x-java-applet
application/x-npebshp
application/asx
audio/x-rmf
audio/rmf
audio/nspaudio
audio/x-nspaudio
...
...
...
...
...
Nombrar objetos
El objeto window se asume por defecto, por lo que
no es necesario nombrarlo.
Ejemplo:
self.document.forms[0] document.forms[0]
Programacin por eventos
En programacin web, las pginas, una vez escritas
e interpretadas por el navegador, quedan estticas
esperando que se produzcan eventos asncronos.
Estos eventos responden a la interaccin por parte
del cliente, tales como pulsacin de un botn, de
una tecla, etc...
Ejemplo:
<input type=button name=miBoton value="Calcular"
onclick="calcula();">
Propiedades del objeto Window
Referencia al actual objeto ventana. Sinnimo de self. window
Si la ventana es un frame, referencia a la ventana del nivel ms alto que la contiene. top
Referencia al actual objeto ventana. Sinnimo de window. self
Si la ventana es un frame, referencia a la ventana que lo contiene. parent
Referencia al objeto ventana que ha abierto la actual. null si fue abierta por el
usuario.
opener
Nombre de la ventana. Usado, habitualmente, como TARGET de <a> o <form>. name
Referencia a la entrada de direcciones del navegador (objeto location). location
Referencia al historial del navegador (objeto history). history
Array de ventanas marcos (objetos window). frames [ ]
Referencia al documento (objeto document) HTML mostrado en la ventana. document
Texto que aparecer en la lnea de estado del navegador. Por defecto y
explcitamente.
defaultStatus,
status
true si la ventana ha sido cerrada. false en caso contrario. closed
Significado Propiedad
Mtodos del objeto Window
Abre una nueva instancia del navegador (nueva ventana).
Cierra una ventana.
open(),
close()
Invoca a la funcin especificada transcurrido cierto intervalo de tiempo. No peridica.
Cancela el intervalo de tiempo especificado, antes de la ejecucin.
setTimeout(),
clearTimeout()
Planifica la ejecucin repetida de la funcin indicada.
Cancela la planificacin.
setInterval(),
clearInterval()
Realiza un scroll relativo (desplazamiento) en el documento de la ventana.
Scroll absoluto.
scrollBy(),
scrollTo()
Redimensiona la ventana valores relativos.
Redimensiona la ventana valores absolutos.
resizeBy(),
resizeTo()
Mueve la ventana valores relativos.
Mueve la ventana a posiciones absolutas.
moveBy,
moveTo()
Caja de dilogo informativa.
Dilogo con aceptacin (devuelve true) o cancelacin (devuelve false).
Dilogo con entrada de usuario. (Aceptar: devuelve el valor introducido Cancelar: null).
alert(),
confirm(),
prompt()
Significado Mtodo
Mtodo open() (I)
Sintaxis:
var w = window.open ("pagina.html", "nombre", "propiedades-
ventana", valor-booleano);
Todos los argumentos son opcionales.
Mtodo open() (II)
Propiedades de ventana:
"width=nnn,heigth=mmm,status=yes,resizable=yes, ".
Si =yes, se habilita la barra de herramientas toolbar
Si =yes, se habilita la lnea de estado status
Si =yes, se permite el redimensionado de la vetnana. resizable
Si =yes, se habilita la barra de men. menubar
Si =yes, se habilita la barra de direcciones (url). location
Especifica el ancho de la ventana en pxeles. width
Especifica el alto de la ventana en pxeles. height
Accin Propiedad
Ejemplo: var w = window.open (pag1.html", "miVentana", "width=300,heigth=200,
menubar=yes,toolbar=yes,status=no,resizable=yes", true);
Mtodo open() (III)
El ltimo argumento, true indica que la URL de la
nueva ventana reemplazar a la entrada actual del
historial del navegador, o de lo contrario, false (por
defecto), se crear una nueva entrada en el historial.
Mtodo close()
Sintaxis: window.close(); objeto-window.close();
Se podrn cerrar ventanas cuyo cdigo JS haya creado
(por seguridad).
Si se desean cerrar otras ventanas, el navegador
informar al usuario con una ventana de confirmacin
(por motivos de seguridad).
El objeto window contina, an habiendo sido cerradas
todas las ventanas. En esta situacin no se podr
acceder a ninguna de sus propiedades. La nica
propiedad disponible en esta situacin es closed: true o
false.
Relacin entre ventanas (I)
Podemos establecer referencias entre ventanas:
1. Una ventana crea a otra: El mtodo open() devuelve
una referencia al nuevo objeto ventana.
2. La nueva ventana puede referirse a la ventana padre
a travs de la propiedad opener del objeto window.
Relacin entre ventanas (II)
La ventana A crea a
B con var B=open();
Referencia a travs
de la variable B.
La ventana A crea a
B con var B=open();
Referencia a travs
de la variable B.
La ventana B puede
referirse a la A a travs
de la propiedad opener.
La ventana B puede
referirse a la A a travs
de la propiedad opener.
A
B
La lnea de estado del browser
Situada en la parte inferior del navegador.
Lugar de informacin del navegador al usuario.
Con la propiedad status podemos establecer
informacin deseada.
Con defaultStatus establecemos la informacin a
mostrar por defecto (no en Mozilla Firefox).
Intervalos: setTimeout()
Establece una llamada temporizada que se ejecutar
transcurrido el intervalo de tiempo especificado en
milisegundos.
Sintaxis:
var identificador = setTimeout ("nom-funcin", tiempo-ms);
Para cancelar una temporizacin, antes de su
ejecucin:
clearTimeout (identificador); No devuelve nada !!.
Intervalos: setInterval()
Establece una llamada peridica, cada intervalo
especificado como parmetro en milisegundos.
Sintaxis:
var identificador = setInterval ("nom-funcin", tiempo-ms);
Para cancelar la ejecucin peridica:
clearInterval(identificador) No devuelve nada !!.
Prctica
El objeto navigator
La propiedad window.navigator se refiere al objeto
navigator.
Propiedades que contienen informacin acerca del
browser: (entre otras),
Plataforma software en el que se ejecuta el navegador. Ej.: "Win32". platform
Nombre interno del cdigo del navegador. Ej.: "Mozilla. appCodeName
Cadena que el navegador enva en su cabecera USER-AGENT HTTP. userAgent
Nmero de la versin y otra informacin asociada. appVersion
Nombre del navegador web. appName
Significado Propiedad
Ejemplo propiedades navigator
MSIE versin 6.0
navigator.appName: Microsoft Internet Explorer
navigator.appVersion: 4.0 (compatible; MSIE 6.0; Windows NT 5.0; yif1000)
navigator.userAgent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; yif1000)
navigator.appCodeName: Mozilla
navigator.platform: Win32
MSIE versin 6.0
navigator.appName: Microsoft Internet Explorer
navigator.appVersion: 4.0 (compatible; MSIE 6.0; Windows NT 5.0; yif1000)
navigator.userAgent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; yif1000)
NETSCAPE Navigator 4.76
navigator.appName: Netscape
navigator.appVersion: 4.76 [en] (Windows NT 5.0; U)
navigator.userAgent: Mozilla/4.76 [en] (Windows NT 5.0; U)
NETSCAPE Navigator 4.76
navigator.appName: Netscape
navigator.appVersion: 4.76 [en] (Windows NT 5.0; U)
navigator.userAgent: Mozilla/4.76 [en] (Windows NT 5.0; U)
Examinar propiedades navigator
var browser="INFORMACIN DEL BROWSER:\n";
for (var propiedad in navigator) {
browser += propiedad + ": " +
navigator[propiedad] + <br>";
}
document.write ("Resultado:<br>" + browser);
Arrays asociativos
Arrays asociativos
Mtodos de navigator
Mtodo javaEnabled(): Proporciona informacin
acerca del soporte de Java. Devuelve true si es
soportado, false en caso contrario.
Mtodo preference(): Permite a los scripts firmados
digitalmente consultar y establecer preferencias de
usuario. Slo en Navigator 4+ / Mozilla / Mozilla
Firefox.
El objeto screen
La propiedad screen del objeto window, se refiere al
objeto Screen.
Este objeto proporciona propiedades tales como el
tamao de la ventana de visualizacin del browser:
propiedades width, height, availWidth y
availHeight (en pxeles).
Otras propiedades: colorDepth, proporciona el
nmero de colores en logaritmo de base 2 (n bits).
Relacin entre frames (I)
Un frame puede referirse a otros frames a travs de
las propiedades frames [ ], parent y top.
Cada ventana tiene la propiedad frames [ ]. Si no
tiene frames que dependan de ella, este array estar
vaco: la propiedad frames.length ser cero.
Una ventana que contenga frames, se referir al
primero como frame[0], y as sucesivamente.
Pueden anidarse referencias a frames a varios
niveles: frames[1].frames[2]...
Relacin entre frames (II)
Ver imagen de Frames
Relacin entre frames (III)
Un frame puede referirse a otros frames para
acceder a variables JS, elementos de HTML o para
llamar a funciones definidas en ese otro frame.
Ejemplo:
var precio= parent.frames[0].pvpCamisa;
var precioEuro=parent.frames[2].convierteEuro(precio);
Si los frames tienen nombre asignado, pueden
referirse tambin a travs de l (conveniente).
Paso de informacin entre pginas
HTML
Peticin (1) http://...
A Documento html
Peticin (2) http://...
B
Documento html
...
A B
t1 t2
Soluciones
Bsicamente, existen 4 mtodos para el intercambio
de informacin entre pginas HTML:
1. A travs de cookies.
2. A travs de applets Java / controles ActiveX.
3. A travs de variables de frames / frameset.
4. A travs de la URL.
Cambio de pginas html
Podemos cambiar de documento html mediante la
propiedad URL del objeto document.
Tambin podemos avanzar o retroceder a pginas
ya visitadas (del historial) mediante
window.history.back() o window.history.forward();
Ejemplo:
if (condicion) document.URL=pagina2.html;
else document.URL=pagina3.html;
Prctica
El Document Object Model (DOM)
Basado en el objeto Document.
Probablemente es el objeto ms usado en la parte
cliente de JS.
Contiene informacin acerca del documento
visualizado en el browser: su URL, su ltima
modificacin, la URL del documento que lo enlaz,
...
De la misma forma, proporciona un conjunto de
mtodos a los que JS puede invocar.
Array de objetos en document
Los objetos contenidos en un objeto document, se
definen como arrays de objetos del mismo tipo.
P.ej., cada elemento <form> crea un array forms[ ]
en el objeto document, cada etiqueta <applet> crea
un array applets[ ], etc...
Llamando a objetos de Document
La forma habitual de llamar a estos objetos creados
en HTML, es a travs del nombre definido en sus
etiquetas.
Ej. <form name=miForm ...> se le llama como:
document.miForm
Si no existe nombre definido para ese objeto, se les
puede llamar a travs del ndice del array que lo
contiene: document.forms[0]
Propiedades de Document (I)
alinkColor Color de los enlaces cuando son activados.
Corresponde al atributo ALINK de la etiqueta <BODY>.
anchors[ ] Array de objetos anclas, que representan las
anclas <A NAME=...> del documento.
applets [ ] Array de applets del documento. Etiqueta
<APPLET>
bgcolor Color de fondo del documento. Corresponde a la
propiedad BGCOLOR de la etiqueta <BODY>.
cookie Propiedad especial que permite a los programas JS
leer y escribir cookies HTTP.
embeds [ ] Array de objetos embebidos (clips de vdeo,
sonido y controles ActiveX) en el documento.
Propiedades de Document (II)
fgColor Color por defecto para el texto. Corresponde a la
propiedad TEXT de la etiqueta <BODY>.
forms [ ] Array de objetos <FORM>.
images [ ] Array de objetos <IMG>.
URL Cadena que representa la URL del documento.
location Sinnimo de URL.
lastModified Cadena que contiene la fecha de la ltima
modificacin sufrida por el documento.
linkColor Color de los enlaces no visitados. Corresponde al
atributo LINK de <BODY>.
Propiedades de Document (III)
links [ ] Array de objetos link <A HREF=...>.
referrer URL del documento que contiene el link que enlaz
con el documento actual, si existe.
title Ttulo del documento: Texto que se encuentra entre las
etiquetas <TITLE> ... </TITLE>.
vlinkColor Color de los enlaces visitados. Corresponde a la
propiedad VLINK de <BODY>.
Propiedad search
La propiedad search del objeto location contiene la
cadena que sigue a la URL (si existe) despus de un
interrogante (incluido).
Uso: Paso de informacin entre pginas.
Ejemplo:
Para una URL:
http://www.aeat.es?var1=330&var2=1P
document.location.search contendr la cadena:
?var1=330&var2=1P&
Propiedad referrer
La propiedad referrer nos proporciona el origen de la pgina que
enlaz con la pgina actual.
Usos:
1. Obtencin de estadsticas.
2. Evitar enlaces directos a una determinada pgina
Ejemplo:
if (document.referrer=="" || document.referrer.indexOf(aeat.es") == -1)
{
document.location=http://www.aeat.es;
}
Generacin dinmica de docs.
El objeto document define tres mtodos que
permite a los programas JS escribir dinmicamente
texto HTML en el documento:
1. open().
2. write().
3. close().
Mtodos: open(), write(), close()
<script>
var p="<html><body bgcolor=aliceblue>"+
"<HR>Hola Mundo</body></html>";
parent.frames[0].document.open();
parent.frames[0].document.write(p);
parent.frames[0].document.close();
</script> Opcional
Aconsejable: Si se omite, la animacin "document loading" no se detiene
en Netscape Navigator.
Adems, al escribir close(), el documento puede ser guardado en la cach del
navegador a partir de ese momento.
Por ltimo, close() cierra el flujo de escritura: Los siguientes write()
abrirn un documento nuevo.
Propiedad images [ ]
Array de imgenes creadas en lnea con el tab
<IMG>.
La principal caracterstica del objeto imagen es la
propiedad src, de lectura / escritura.
Se puede cambiar, dinmicamente, esta propiedad
de forma que el efecto final es el de reemplazar la
imagen. Es aconsejable que la nueva imagen tenga
el mismo ancho y alto que la original (width, heigth).
Propiedades de imgenes
Adems de la propiedad src:
1. Propiedad complete false si la imagen todava no
se ha completado su carga, true en caso contrario.
2. width, height y border Propiedades de solo
lectura.
3. lowsrc Propiedad LOWSRC del atributo <IMG>:
Especifica la URL de una imagen opcional que se
cargar y visualizar cuando la pgina se est
visualizando un dispositivo de baja resolucin.
Propiedad de lectura/escritura.
Imgenes Off-Screen
Imgenes forzadas a que el navegador las guarde
en su memoria cach (pre-carga) para visualizarlas
posteriormente con mayor rapidez.
Ejemplo de uso:
var imagenes=new Array(10);
for (var i=0; i<imgenes.length; i++) {
imagenes[i]=new Image();
imagenes[i].src=/imagenes/imagen"+ i + ".gif;
}
...
document.images[0].src=imagenes[3].src;
Efecto Rollover
<script>
var normal=new Image();
var vuelto=new Image();
normal.src=/imagenes/normal.gif";
vuelto.src=/imagenes/vuelto.gif";
function animar(numeroDeImagen) {
document.images[numeroDeImagen].src=vuelto.src;
}
function volver(numeroDeImagen) {
document.images[numeroDeImagen].src=normal.src;
}
</script>
<A HREF="javascript:void();" onmouseover="animar(0);
onmoseout="volver(0);">
<IMG src="images/normal.gif" name=0 border=0>
</A>
Eventos y manejadores (I)
Documento o Imagen cargado
Se libera la tecla
Combinacin de onKeyDown+onKeyUp
Tecla presionada
El elemento toma el foco
Error en la carga de una imagen
Doble click (No en sist. UNIX/Linux)
El elemento ha sido pulsado
El elemento ha cambiado
El elemento pierde el foco
Carga interrumpida
Ocurre cuando...
Document e Image. onLoad
Document, Image, Link e Input text. onKeyUp
Document, Image, Link e Input text. onKeyPress
Document, Image, Link e Input text. onKeyDown
Input text y Window. onFocus
Image. onError
Document. Link, Image y Button. onDblClick
Link y Button onClick
Input text y Select. onChange
Elementos de formulario y Window. onBlur
Image. onAbort
Soportado por el/los elemento/s Evento
Eventos y manejadores (II)
Document. El documento se descarga onUnload
Form. Peticin de envo de formulario. Se
devuelve false si no se desea enviar
onSubmit
Window. La ventana se redimensiona onResize
Form. Peticin de borrado de formulario. Se
devuelve false si no se desea borrar
onReset
Document, Link, Image y Button. Se libera el botn del ratn onMouseUp
Link, Image y Layer El ratn se posa sobre el elemento onMouseOver
Link, Image y Layer. El ratn se aleja del elemento onMouseOut
Document, Link, Image y Button. Presionado el botn del ratn onMouseDown
Soportado por el/los elemento/s Ocurre cuando... Evento
Manejadores de eventos en JS
La mayora de los eventos se definen como atributos
de etiquetas HTML:
<input type=button name=b1 value="Ok" onClick="validar();">
Estos mismos eventos se pueden definir con sintaxis
JavaScript:
document.f1.b1.onclick=function validar() { ... };
Ventajas de esta ltima notacin:
1. Reduce la terminologa HTML y proporciona modularidad a
travs de JS.
2. Las funciones no tienen que ser fijadas en el cdigo HTML,
sino que pueden ser modificadas en tiempo de ejecucin.
Retorno de valores en eventos
En muchos casos, un manejador de evento retorna
un valor para indicar el resultado del evento.
Ejemplos habituales de de ellos:
1. onSubmit puede devolver true si se desea enviar el
formulario; false en caso contrario.
2. onReset puede devolver true si se desea limpiar un
formulario; false en caso contario.
Formularios: El objeto Form
El objeto form es una propiedad del objeto
document.
Se representa como un array de elementos forms[ ]
Los formularios escritos en el documento se
encuentran ubicados en el mismo orden en que
aparecen en el documento.
Podemos referirnos al ltimo formulario de un
documento como:
document.forms [document.forms.length-1]
Propiedades de Form
La propiedad ms interesante es: elements[ ], la
cual contiene todos los elementos de un formulario
particular: document.forms[2].elements[4]
Otras propiedades son:
1. action, corresponde a la propiedad ACTION de
<FORM> en HTML.
2. encoding, a la propiedad ENCODING en HTML.
3. method, a METHOD.
4. target, a TARGET.
Mtodos de Form
Dos mtodos a destacar:
1. Mtodo submit() Submite o enva el formulario.
2. Mtodo reset() Borra el contenido de los
elementos del formulario.
Ejemplos de uso:
document.f1.submit(); Provoca el envo del formulario.
document.f2.reset(); Provoca el borrado del formulario.
Eventos de Form
Acompaan a estos dos ltimos mtodos dos
eventos que detectan el envo del formulario o su
borrado:
1. Evento onSubmit.
2. Eventos onReset.
Elementos de Form
Mltiples lneas de texto. onChange, onBlur. <TEXTAREA> Textarea
<INPUT TYPE=text>
<INPUT TYPE=submit>
<SELECT>
<INPUT TYPE=reset>
<INPUT TYPE=radio>
<INPUT TYPE=password>
<OPTION>
<INPUT TYPE=hidden>
<INPUT TYPE=file>
<INPUT TYPE=checkbox>
<INPUT TYPE=button>
Etiqueta HTML
Lnea sencilla de texto. onChange, onBlur. Text
Botn de envo de formulario. onClick. Submit
Lista desplegable de opciones. onChange. Select
Botn que limpia el formulario. onClick. Reset
Se selecciona uno de los botones. onClick. Radio
Campo de entradas ocultas. onChange. Password
Item individual de una lista de seleccin (<SELECT>).
EVENTOS EN <SELECT>.
Option
Elemento de formulario no visible. Sin Eventos. Hidden
Campo de entrada para introducir el nombre de un
fichero a descargar. onChange.
FileUpload
Se selecciona el cuadro. onClick. Checkbox
Se pulsa el botn. onClick. Button
Descripcin y Evento Objeto
Propiedad form
Cada elemento de formulario tiene, a su vez, una
propiedad form.
Esta propiedad es una referencia al formulario que
lo contiene.
Utilidad: Para referirse a otros elementos del mismo
formulario.
Referencia this
Una referencia a this apunta al mismo objeto que la
nombra.
Ejemplos:
this.form.elements[4];
<input type=button onClick="validaFormulario(this.form);">
Capas (DHTML)
Las capas, en cada navegador, se indican de forma
distinta:
MSIE / Mozilla / Mozilla Firefox: <SPAN>
Netscape: <LAYER>
<DIV> establece divisiones html, y sirve, a su vez,
como elemento de definicin de capas html en
ambos navegadores.
Elemento <DIV>
La sintaxis bsica:
<DIV> ... </DIV>
Aunque <DIV> es soportado por ambos
navegadores, el modelo de estilos en cada uno de
ellos es diferente.
Para navegadores ms modernos el HTML 4.0
permite utilizar otra etiqueta similar: <SPAN>.
<DIV> en Internet Explorer
Sintaxis:
<DIV id=nombre ... style=...> </DIV>
El modelo CSS soportado por MSIE es ms amplio
que el soportado por Netscape (ver MSDN).
Estilo display:
<div id=capa align=center style=display:inline>
...
</div>
display:none
Prctica
Objetos Date y Math
Objeto Date Tratamiento de fechas y valores
horarios.
Objeto Math Propiedades y mtodos para las
operaciones y constantes matemticas.
Objeto Date (I)
Sintaxis:
fechaSistema = new Date();
fechaSistema = new Date(ao, mes-1, da);
fechaSistema = new Date(ao, mes-1, da, hh, mm, ss);
Devuelve la FECHA actual en milisegundos (nnnnn..nn) desde
el 1/1/1970.
getTime()
Devuelve los segundos actuales (ss). getSeconds()
Devuelve el mes actual (nn) [0..11]. getMonth()
Devuelve los minutos actuales (mm). getMinutes()
Devuelve la hora actual (hh). getHours()
Devuelve el da de la semana actual [0..6]. getDay()
Devuelve el da del mes actual. getDate()
Accin Mtodo
Objeto Date (II)
Devuelve el valor del objeto fecha como una cadena en formato
local.
toLocaleString()
Devuelve el valor del objeto fecha en GMT como una cadena. toGMTString()
Establece el ao. setYear(aa o aaaa) - Desaprobado
Establece en milisegundos la FECHA transcurrida entre el
1/1/1970 y la fecha en cuestin.
setTime(nnnnnnnn)
Establece los segundos. setSeconds(ss)
Establece el mes. [0..11] setMonth(mm)
Establece los minutos. setMinutes(mm)
Establece la hora. setHours(hh)
Establece el da del mes. setDate(dd)
Devuelve el ao actual (aa o aaaa, segn navegador). getYear() - Desaprobado
Diferencia en minutos entre la hora actual y la GMT. getTimezoneOffset()
Accin Mtodo
Nuevos mtodos de Date (JS 1.3)
Establece el ao. Opcionalmente, mes-1 y da. setFullYear(aaaa, [mm], [dd])
Devuelve el ao en formato aaaa. getFullYear()
Accin Mtodo
Ejemplos sobre Date()
El objeto Math()
Acceso a propiedades:
Math.propiedad
Acceso a mtodos:
Math.mtodo(param1, param2, ..., paramN);
Raz cuadrada de 2. SQRT2
Raz cuadrada de . SQRT1_2
Nmero . PI
Logaritmo en base 10 de e. LOG10E
Logaritmo en base 2 de e. LOG2E
Logaritmo neperiano de 10. LN10
Logaritmo neperiano (base e) de 2. LN2
Constante de Euler o nmero e. E
Valor Propiedad
Propiedades
y Mtodos
Estticos
Mtodos de Math (I)
Devuelve el menor de {x,y}. min(x,y)
Devuelve el mayor de {x,y}. max(x,y)
Calcula el logaritmo natural de n. log(n)
Redondea un nmero eliminando su parte decimal (trunca). floor(n)
Calcula un exponencial del nmero e. exp(n)
Calcula el coseno de n. cos(n)
Redondea un nmero al prximo entero. ceil(n)
Calcula la arcotangente de n. atan(n)
Calcula el arcoseno de n. asin(n)
Calcula el arcocoseno de n. acos(n)
Calcula el valor absoluto de n. abs(n)
Accin Mtodo
Mtodos de Math (II)
Accin Mtodo
Calcula la tangente de n. tan(n)
Calcula la raz cuadrada de n. sqrt(n)
Calcula el seno de n. sin(n)
Redondea al nmero entero ms cercano [,0 .. ,49] por defecto
[,50 .. ,99] por exceso.
round(n)
Genera un nmero aleatorio entre [0,1]. random()
Calcula la potencia x
y
. pow(x,y)
Cookies Qu son (I)
Las cookies constituyen una potente herramienta
empleada por los servidores Web para almacenar y
recuperar informacin acerca de sus visitantes.
Dado que el Protocolo de Transferencia de
HiperTexto (HTTP) es un protocolo sin estados (no
almacena el estado de la sesin entre peticiones
sucesivas), las cookies proporcionan una manera de
conservar informacin entre peticiones del cliente,
extendiendo significativamente las capacidades de
las aplicaciones cliente/servidor basadas en la Web.
Cookies Qu son (II)
Una cookie no es ms que un fichero de texto que
algunos servidores piden a nuestro navegador que
escriba en nuestro disco duro, con informacin
acerca de lo que hemos estado haciendo por sus
pginas.
Entre las ventajas de las cookies se cuenta el hecho
de ser almacenadas en el disco duro del usuario,
liberando as al servidor de una importante
sobrecarga. Es el propio cliente el que almacena la
informacin y quien se la devolver posteriormente
al servidor cuando ste la solicite (si es el caso).
Cookies Qu son (III)
Adems, las cookies poseen una fecha de
caducidad, que puede oscilar desde el tiempo que
dure la sesin hasta una fecha dada, a partir de la
cual dejan de ser operativas.
El usuario puede rechazar, a voluntad, las cookies
desde su navegador. De esta manera es libre de
elegir si prefiere la navegacin con cookies o sin
ellas, de decidir si desea arriesgar su intimidad a
cambio de ciertas comodidades y de una
navegacin ms individualizada.
Cookies Dnde se guardan
Internet Explorer (Windows 95, 98 y ME):
c:\windows\cookies\*.txt
Internet Explorer (Windows NT, 2000 y XP):
c:\windows\Documents and Settings\usuario\
Cookies\*.txt
Netscape Navigator:
..\Netscape\Users\usuario\cookies.txt
Cookies: Nombres y valores
Cada cookie representa una pequea porcin de
informacin con una fecha de caducidad opcional,
que se aade al fichero o directorio de cookies con
el siguiente formato:
nombre = valor;
El nombre es una cadena de caracteres. Su sintaxis
es diferente al de las variables JS: caracteres
alfanumricos y lneas de subrayado.
Los nombres SON Case-Sensitive.
Cookies: Caducidad
La fecha de caducidad es un parmetro opcional
que indica el tiempo que se conservar la cookie.
Este parmetro se especificar en formato
Date.toGMTString():
nombre = valor; expires = fechaCaducidad;
Si no se especifica el valor de expires la cookie
existir nicamente mientras el navegador est en
ejecucin. Posteriormente se eliminar.
Si se establece un valor ya transcurrido o bien cero,
la cookie se elimina inmediatamente.
Cookies: Dominio (I)
Si editamos el fichero de cookies, veremos que
aparecen muchos ms datos, algunos bastante
crpticos:
Dominio (domain): Nombre de dominio, parcial o
completo, para el cual ser vlida la cookie. El
navegador devolver la cookie a todo host que
encaje con el nombre de dominio parcial.
Ejemplo: domain=".aeat.es El navegador
devolver la cookie a servidores web alojados en
cualquiera de las mquinas "www.aduanas.aeat.es",
desarrollo.pyc.aeat.es", etc.
Cookies: Dominio (II)
Los nombres de dominio deben incluir al menos dos
puntos para evitar intentos fraudulentos de encajar
dominos de alto nivel como .es.
Si no se especifica ningn dominio, entonces el
navegador slo devolver la cookie a la mquina
que la origin (locales).
Cookies: Camino
El camino de una cookie (path) se utiliza para que el
navegador lo contraste con la URL del script que
desea tratarla antes de devolver la cookie.
Si especificamos: path="/cgi-bin", entonces la
cookie ser devuelta a pginas de la forma "/cgi-
bin/pedido.php", "/cgi-bin/datos.html", etc.
Por defecto, el camino se establece al camino del
documento HTML que emiti la cookie, lo que hace
que la cookie se enve a cualquier pgina que
cuelgue de ese directorio.
Cookies: Entorno
El atributo secure indica que la cookie slo ser
transmitida a travs de un canal seguro con SSL.
Cookies: Acceso (I)
Las cookies son accesibles a travs de la propiedad
cookie del objeto document, tanto en lectura como
en escritura.
document.cookie devuelve una cadena
conteniendo las cookies existentes en la pgina.
Manipulando esta cadena (string) es posible
localizar la informacin a extraer, en caso de lectura,
o a escribir, en caso de enviar una cookie.
Cookies: Acceso (II)
El mtodo ms simple de enviar una cookie:
document.cookie = ejemplo=cookie
La forma de leer la cookie desde el navegador:
var miCuqui = document.cookie;
la cual visualizar la informacin en forma de pares
(variable=valor;).
Cookies: Guardar cookies
function setCookie (name, value, expires, path, domain, secure) {
document.cookie = name + "=" + escape escape escape escape(value) +
((expires == null) ? "" : "; expires=" + expires.toGMTString())+
((path == null) ? "" : "; path=" + path) +
((domain == null) ? "" : "; domain=" + domain) +
((secure == null) ? "" : "; secure"); }
El valor de las cookies no puede contener comas, puntos y comas o espacios
en blanco. Por este motivo es conveniente aplicarle al valor la funcin
escape(), para que codifique estos smbolos y se pueda almacenar
correctamente. La lectura de la cookie se har posteriormente con la funcin
unescape().
El valor de las cookies no puede contener comas, puntos y comas o espacios
en blanco. Por este motivo es conveniente aplicarle al valor la funcin
escape(), para que codifique estos smbolos y se pueda almacenar
correctamente. La lectura de la cookie se har posteriormente con la funcin
unescape().
Cookies: Recuperar cookies
function getCookie(name) {
var cname = name + "=";
var dc = document.cookie;
if (dc.length > 0) {
begin = dc.indexOf(cname);
if (begin != -1) {
begin += cname.length;
end = dc.indexOf(";", begin);
if (end == -1) end = dc.length;
return unescape unescape unescape unescape(dc.substring(begin, end));
}
}
return null;
}
Cookies: Modificar cookies
Para modificar el valor de una cookie, simplemente
se establece el nuevo valor con el mismo nombre y
se almacena de nuevo con document.cookie.
Cookies: Eliminar cookies
Para eliminar una cookie ya existente, se escribir
una cookie con el mismo nombre, con un valor
arbitrario y una fecha de caducidad ya pasada. Esto
ltimo provocar que la cookie se elimine.
Prctica
Objetos - Definicin
Un objeto es un conjunto de atributos o propiedades
y mtodos.
La forma habitual de crear un objeto es mediante el
operador new:
var o = new Objeto();
Creacin de objetos
En JS 1.2, otra forma de crear e instanciar, a su
vez, objetos es a travs de los objetos literales:
var circulo = {x:0, y:10, radio:25};
var homer = {
nombre: "Homer Simpson",
edad: 34,
casado: true,
profesion: "operador de planta",
email: " [email protected]"
};
Acceso a propiedades y mtodos
El operador de acceso a las propiedades y mtodos
de un objeto es el operador punto .:
document.miForm.nif
document.miForm.submit();
El valor de la izquierda del punto se refiere al objeto
y el de la derecha a la propiedad o mtodo.
Valores undefined en objetos
Si intentamos acceder a una propiedad o mtodo
que no existe para un objeto, JS devolver el valor
undefined.
A travs del operador delete (JS 1.2) podemos
eliminar una propiedad o mtodo de un objeto. Si
intentamos acceder a una propiedad o mtodo
borrado con delete, obtendremos el valor
undefined.
Enumeracin de propiedades
Las propiedades de un objeto se pueden recorrer
mediante el uso de un bucle for..in.
Ejemplo:
function listarPropiedades (objeto) {
var nombres="";
for (var i in objeto) nombres+=i+"\n";
alert(nombres);
}
Crear nuevos objetos
Se realiza en dos pasos:
1. Definir el tipo de objeto (function).
2. Crear instancias del objeto (operador new).
Para crear un tipo de objeto, se crear una funcin
que especifique su nombre (constructor),
propiedades y mtodos:
function auto (marca, modelo, anio) {
this.marca=marca;
this.modelo=modelo;
this.anio=anio;
}
Propiedades
Instanciar objetos
A partir de la definicin del objeto, las nuevas
instancias de ese objeto se crearn con el operador
new:
var miAuto = new auto ("Ford", "Sierra", 1988);
Se podrn acceder a las propiedades:
miAuto.marca Devolver "Ford".
miAuto.modelo Devolver "Sierra".
miAuto.anio Devolver 1988.
Propiedades objetos (I)
Un objeto puede tener propiedades que a su vez
sean objetos.
Ejemplo:
function persona (nombre, edad, sexo, auto) {
this.nombre=nombre;
this.edad=edad;
this.sexo=sexo;
this.auto=auto;
}
Propiedades objetos (II)
La instanciacin del objeto persona se hara como:
var Juan=new persona("Juan", 28, "H", miAuto);
De esta forma podemos tener referencias a las
propiedades del auto de una persona a travs de
una persona concreta (de un objeto):
Juan.auto.marca
Juan.auto.modelo
Juan.auto.anio
Propiedades objetos (III)
Una caracterstica importante de las propiedades de
los objetos en JS, es que se pueden aadir, en
tiempo de ejecucin, nuevas propiedades a objetos
ya instanciados:
Juan.auto.color="Negro";
Definir Mtodos (I)
Un mtodo es una funcin asociada a un objeto.
Se definen de la misma manera que se define una
funcin normal.
La funcin se asocia al objeto indicando nicamente
el nombre de la funcin (mtodo, sin parntesis).
Posteriormente se invocarn con la notacin punto:
objeto.mtodo();
Definir Mtodos (II)
Ejemplo:
function persona (nombre, edad, sexo, auto) {
this.nombre=nombre;
this.edad=edad;
this.sexo=sexo;
this.auto=auto;
this.informacion=inforPersona;
}
function inforPersona(separador) {
return "Nombre: "+ this.nombre + separador +
"Edad: " + this.edad + separador +
"Sexo: " + this.sexo;
}
Prctica

Javascript

Cargado por

Copyright:

Formatos disponibles

Javascript

Cargado por

Información del documento

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

Cargado por

Copyright:

Formatos disponibles

JAVASCRIPT

También podría gustarte