Javascript

JAVASCRIPT
Bibliografa: JavaScript. The Definitive Guide 2 OReilly. Diseo de pginas web interactivas con JavaScript 2 Ed. 2 Ra-Ma Professional JavaScript 2 Wrox 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

Navegador
Netscape Navigator 2.0 Microsoft Internet Explorer 3.0 Netscape Navigator 3.0 Netscape Navigator 4.0 Microsoft Internet Explorer 4.0 Netscape Navigator 4.5 Microsoft Internet Explorer 5.0 Netscape Navigator 4.7 Microsoft Internet Explorer 5.5 Netscape Navigator 6.0 Microsoft Internet Explorer 6.0
Ao
1995 1996 1996 1997 1997 1998 1999 2000 2001 2001 2002 JavaScript 1.0
Versin
JavaScript 1.0 - JScript 1.0 JavaScript 1.1 JavaScript 1.2 JavaScript 1.2 - JScript 3.0 JavaScript 1.3 JavaScript 1.3 - JScript 5.0 JavaScript 1.3 JavaScript 1.3 JScript 5.5 JavaScript 1.5 JavaScript 1.3 JScript 5.6
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> <script language=JavaScript1.1> var version=1.1; </script> <script language=JavaScript1.2> var version=1.2; </script> <script language=JavaScript1.3> 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 abstract boolean const const final final input input continue continue finally finally in in break break default default float float byte byte do do for for case case double double catch catch else else char char class class
extends false extends false int int new new static static implements implements null null super super try try
function goto function goto native native short short
instance of interface long instance of interface long protected protected public public throw throw with with return return throws throws
package private package private switch switch var var
synchronized this synchronized this val val while while
transient true transient true
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 10308 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:
Constante Number.MAX_VALUE Number.MIN_VALUE Number.POSITIVE_INFINITY (*) Number.NEGATIVE_INFINITY (*) Significado El mayor nmero representable. El menor nmero. Valor especial infinito positivo. Valor especial infinito negativo.
(*) Slo MSIE 4.0+ y nuevos navegadores.
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 +. Propiedad length. Mtodo substring (inicio, fin). Mtodo substring (inicio). Mtodo substr (inicio, long). Mtodo substr (inicio).
Determinar la longitud de cadena:
Obtener subcadenas:

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; Mtodo lastIndexOf (subcadena [, desde]).
La ltima ocurrencia:
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 Cdigo escapado escapado \b \b \f \f \n \n \r \r \t \t \\ \\ \' \' \" \" \NNN \NNN \xNN \xNN \uNNNN \uNNNN Carcter visible Carcter visible Caracter anterior Caracter anterior Salto de pgina Salto de pgina Salto de lnea Salto de lnea Retorno de carro Retorno de carro Tabulador Tabulador Caracter \\ Caracter Comilla simple Comilla simple Comilla doble Comilla doble Cdigo de caracter del juego LatinCdigo de caracter del juego Latin1, en octal 1, en octal Cdigo de caracter del juego LatinCdigo de caracter del juego Latin1, en hexadecimal. 1, en hexadecimal. Cdigo de caracter del juego Cdigo de caracter del juego Unicode, en hexadecimal. 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
Suma Resta Multiplicacin Divisin Mdulo Incremento: Preincremento y Posincremento Decremento: Predecremento y Posdecremento Negacin unaria + * / % ++
--
Operadores lgicos
Producto lgico OR Suma lgica AND Negacin lgica NOT || && !
+ 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
-
Igualdad Desigualdad Identidad No identidad Mayor que Menor que Mayor o igual que Menor o igual que
== != === !== > < >= <=
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
Operador OR Operador XOR Operador AND Desplazamiento izq. Desplazamiento der. Derecha con ceros Negacin NOT | ^ & << >> >>> ~
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
El operador bsico de asignacin es =. La sintaxis de los operadores de asignacin: a op= b;
Operador Operador += += -= -= *= *= /= /= %= %= <<= <<= >>= >>= >>>= >>>= &= &= |= |= ^= ^= Ejem plo Ejem plo aa += bb += aa -= bb -= aa *= bb *= aa /= bb /= aa % = bb %= aa <<= bb <<= aa >>= bb >>= aa >>>= bb >>>= aa &= bb &= aa |= bb |= aa ^= bb ^= Equivalente Equivalente aa = aa + bb = + aa = aa --bb = aa = aa ** bb = aa = aa //bb = aa = aa % bb = % aa = aa << bb = << aa = aa >> bb = >> aa = aa >>> bb = >>> aa = aa & bb = & aa = aa ||bb = aa = aa ^ bb = ^
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>

document document
<form name=calc method= action=> </form>
<input type=text name=visor value=..>
Forma general de acceder a un elemento:

document.nombreForm.nombreElemento.propiedad
Ejemplo:
document.calc.visor.value=5;
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
Postincremento var contador = 0; while (contador < 10) document.write ((contador++) + "<br>");
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, var contador = 0; Preincremento 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,
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 + " window[elem] + "<br>"); valor: " +
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);
Salida del ejemplo anterior

Valores: 0 0 Valores: 0 0 Valores: 0 1 Valores: 0 1 Valores: 0 2 Valores: 0 2 Valores: 0 3 Valores: 0 3 Valores: 1 0 Valores: 1 0 Valores: 1 1 Valores: 1 1 Valores: 1 2 Valores: 1 2 Valores: 1 3 Valores: 1 3 Valores: 3 0 Valores: 3 0 Valores: 3 1 Valores: 3 1 Valores: 3 2 Valores: 3 2 Valores: 3 3 Valores: 3 3 FINAL: 4 0 FINAL: 4 0
bucleExt: bucleExt: for (var i i= 0; i i< 10; i++) {{ for (var = 0; < 10; i++) bucleInt: bucleInt: for (var j j= 0; j j< 10; j++) {{ for (var = 0; < 10; j++) ifif(j(j> 3) break; > 3) break; ifif(i(i== 2) break bucleInt; == 2) break bucleInt; ifif(i(i==4 ) )break bucleExt; ==4 break bucleExt; document.write ("<br>Valores: + i i+ " "" "+ j); document.write ("<br>Valores: + + + j); }} }} document.write ("<br>FINAL: " "+ i i+ " "" "+ j); document.write ("<br>FINAL: + + + j);
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 :: var r=(confirm("Pulsa lo que quieras!!!")) "Bien, has pulsado Aceptar "Oooops, has pulsado Cancelar; "Oooops, has pulsado Cancelar; alert(r); 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()
Entrada de datos usuario Valor inicial
Devolver null
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]; matriz[0][1] Devuelve 1,2. Devuelve 2.
Mtodos del objeto Array

join() concat() push() shift() split() slice() pop() toString() sort() splice() unshift() toSource()
Aplicados al objeto array: Aplicados al objeto array:
variable-array.metodo(); 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 [1, 2, 3]. aparece encerrada entre corchetes
Solucin en JavaScript1.3 para dichos navegadores toSource().
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
self, window, self, window, parent, top parent, top plugins [ ] plugins [ ] mimeTypes [ ] mimeTypes [ ]
navigator navigator
Familia de Netscape Navigator
frames [ ] frames [ ]
forms [ ] forms [ ] anchors [ ] anchors [ ]
Window Window
location location
elements [ [] ] elements array de objetos de array de objetos de Formulario (Form): Formulario (Form): Button Button Checkbox Checkbox FileUpload FileUpload Hidden Hidden Password Password Radio Radio Select Select Submit Submit Text Text TextArea TextArea
links [ ] links [ ] history history images [ ] images [ ] applets [ ] applets [ ] embeds [ ] embeds [ ]
1.1
options [ ] options [ ]
document document
array de objetos array de objetos options options
Objetos plugins y mimeTypes

document.write("<b>plugins instalados: "+navigator.plugins.length+"</b><br>"); document.write("<b>plugins instalados: "+navigator.plugins.length+"</b><br>"); for (var i=0; i<navigator.plugins.length; i++) for (var i=0; i<navigator.plugins.length; i++) document.write(navigator.plugins[i].name+"<br>"); document.write(navigator.plugins[i].name+"<br>"); document.write("<hr>"); document.write("<hr>"); document.write("<b>mimeTypes soportados: "+navigator.mimeTypes.length+"</b><br>"); document.write("<b>mimeTypes soportados: "+navigator.mimeTypes.length+"</b><br>"); for (var i=0; i<navigator.mimeTypes.length; i++) for (var i=0; i<navigator.mimeTypes.length; i++) document.write(navigator.mimeTypes[i].type+"<br>"); document.write(navigator.mimeTypes[i].type+"<br>");
Ejemplo plugins[] en Netscape

plugins instalados: 16 plugins instalados: 16 Microsoft Windows Media Services Microsoft Windows Media Services Shockwave Flash Shockwave Flash Adobe SVG Viewer Plugin Adobe SVG Viewer Plugin NPSnpy Dynamic Link Library NPSnpy Dynamic Link Library RealPlayer(tm) G2 LiveConnect-Enabled Plug-In (32-bit) RealPlayer(tm) G2 LiveConnect-Enabled Plug-In (32-bit) Adobe Acrobat Adobe Acrobat Netscape Default Plug-in Netscape Default Plug-in Java Plug-in Java Plug-in Java Plug-in Java Plug-in Java Plug-in Java Plug-in Java Plug-in Java Plug-in Microsoft Reader Microsoft Reader Windows Media Player Plug-in Dynamic Link Library Windows Media Player Plug-in Dynamic Link Library Beatnik Player V2.0.5.2 Beatnik Player V2.0.5.2 NPAVI32 Dynamic Link Library NPAVI32 Dynamic Link Library LiveAudio LiveAudio
Ejemplo mimeTypes en Netscape

mimeTypes soportados: 523 mimeTypes soportados: 523 application/x-drm application/x-drm image/svg-xml image/svg-xml image/svg image/svg application/x-npsnpy-plugin application/x-npsnpy-plugin ** application/x-java-bean;version=1.2.1 application/x-java-bean;version=1.2.1 application/x-java-applet;version=1.2.1 application/x-java-applet;version=1.2.1 application/x-java-bean;version=1.2.2 application/x-java-bean;version=1.2.2 application/x-java-applet;version=1.2.2 application/x-java-applet;version=1.2.2 application/x-java-bean;version=1.3 application/x-java-bean;version=1.3 application/x-java-applet;version=1.3 application/x-java-applet;version=1.3 application/x-java-bean;jpi-version=1.3.1 application/x-java-bean;jpi-version=1.3.1 application/x-java-applet;jpi-version=1.3.1 application/x-java-applet;jpi-version=1.3.1 application/x-java-bean;version=1.1.2 application/x-java-bean;version=1.1.2 application/x-java-applet;version=1.1.2 application/x-java-applet;version=1.1.2 application/x-java-bean;version=1.1.3 application/x-java-bean;version=1.1.3 application/x-java-applet;version=1.1.3 application/x-java-applet;version=1.1.3 application/x-java-bean;version=1.2 application/x-java-bean;version=1.2 application/x-java-applet;version=1.2 application/x-java-applet;version=1.2 application/x-java-bean application/x-java-bean application/x-java-applet application/x-java-applet application/x-java-bean;version=1.1 application/x-java-bean;version=1.1 application/x-java-applet;version=1.1 application/x-java-applet;version=1.1 application/x-java-bean;version=1.1.1 application/x-java-bean;version=1.1.1 application/x-java-applet;version=1.1.1 application/x-java-applet;version=1.1.1 application/x-npebshp application/x-npebshp application/asx application/asx audio/x-rmf audio/x-rmf audio/rmf audio/rmf audio/nspaudio audio/nspaudio audio/x-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

Propiedad
closed defaultStatus, status document frames [ ] history location name opener parent self top window
Significado
true si la ventana ha sido cerrada. false en caso contrario. Texto que aparecer en la lnea de estado del navegador. Por defecto y explcitamente. Referencia al documento (objeto document) HTML mostrado en la ventana. Array de ventanas marcos (objetos window). Referencia al historial del navegador (objeto history). Referencia a la entrada de direcciones del navegador (objeto location). Nombre de la ventana. Usado, habitualmente, como TARGET de <a> o <form>. Referencia al objeto ventana que ha abierto la actual. null si fue abierta por el usuario. Si la ventana es un frame, referencia a la ventana que lo contiene. Referencia al actual objeto ventana. Sinnimo de window. Si la ventana es un frame, referencia a la ventana del nivel ms alto que la contiene. Referencia al actual objeto ventana. Sinnimo de self.
Mtodos del objeto Window

Mtodo
alert(), confirm(), prompt() moveBy, moveTo() resizeBy(), resizeTo() scrollBy(), scrollTo() setInterval(), clearInterval() setTimeout(), clearTimeout() open(), close()
Significado
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). Mueve la ventana valores relativos. Mueve la ventana a posiciones absolutas. Redimensiona la ventana valores relativos. Redimensiona la ventana valores absolutos. Realiza un scroll relativo (desplazamiento) en el documento de la ventana. Scroll absoluto. Planifica la ejecucin repetida de la funcin indicada. Cancela la planificacin. Invoca a la funcin especificada transcurrido cierto intervalo de tiempo. No peridica. Cancela el intervalo de tiempo especificado, antes de la ejecucin. Abre una nueva instancia del navegador (nueva ventana). Cierra una ventana.
Mtodo open()
Sintaxis:
(I)
var w = window.open ("pagina.html", "nombre", "propiedadesventana", valor-booleano);
Todos los argumentos son opcionales.
Mtodo open()
(II)
Propiedades de ventana:
"width=nnn,heigth=mmm,status=yes,resizable=yes, ".
Propiedad height width location menubar resizable status toolbar Accin Especifica el alto de la ventana en pxeles. Especifica el ancho de la ventana en pxeles. Si =yes, se habilita la barra de direcciones (url). Si =yes, se habilita la barra de men. Si =yes, se permite el redimensionado de la vetnana. Si =yes, se habilita la lnea de estado Si =yes, se habilita la barra de herramientas
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 La ventana A crea a B con var B=open(); B con var B=open();
A B
La ventana B puede La ventana B puede referirse a la A a travs referirse a la A a travs de la propiedad opener. de la propiedad opener.
Referencia a travs Referencia a travs de la variable B. de la variable 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),
Propiedad
appName appVersion userAgent appCodeName platform Nombre del navegador web. Nmero de la versin y otra informacin asociada. Cadena que el navegador enva en su cabecera USER-AGENT HTTP. Nombre interno del cdigo del navegador. Ej.: "Mozilla. Plataforma software en el que se ejecuta el navegador. Ej.: "Win32".
Significado
Ejemplo propiedades navigator

MSIE versin 6.0 MSIE versin 6.0 navigator.appName: Microsoft Internet Explorer navigator.appName: Microsoft Internet Explorer navigator.appVersion: 4.0 (compatible; MSIE 6.0; Windows NT 5.0; yif1000) 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.userAgent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; yif1000) navigator.appCodeName: Mozilla navigator.appCodeName: Mozilla navigator.platform: Win32 navigator.platform: Win32
NETSCAPE Navigator 4.76 NETSCAPE Navigator 4.76 navigator.appName: Netscape navigator.appName: Netscape navigator.appVersion: 4.76 [en] (Windows NT 5.0; U) navigator.appVersion: 4.76 [en] (Windows NT 5.0; U) navigator.userAgent: Mozilla/4.76 [en] (Windows NT 5.0; U) navigator.userAgent: Mozilla/4.76 [en] (Windows NT 5.0; U) navigator.appCodeName: Mozilla navigator.appCodeName: Mozilla navigator.platform: Win32 navigator.platform: Win32
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://...
Documento html
Peticin (2) http://...
Documento html
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 lectura. Propiedades de solo
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)

Evento
onAbort onBlur onChange onClick onDblClick onError onFocus onKeyDown onKeyPress onKeyUp onLoad
Ocurre cuando...
Carga interrumpida El elemento pierde el foco El elemento ha cambiado El elemento ha sido pulsado Doble click (No en sist. UNIX/Linux) Error en la carga de una imagen El elemento toma el foco Tecla presionada Combinacin de onKeyDown+onKeyUp Se libera la tecla Documento o Imagen cargado
Soportado por el/los elemento/s

Image. Elementos de formulario y Window. Input text y Select. Link y Button Document. Link, Image y Button. Image. Input text y Window. Document, Image, Link e Input text. Document, Image, Link e Input text. Document, Image, Link e Input text. Document e Image.
Eventos y manejadores (II)

Evento
onMouseDown onMouseOut onMouseOver onMouseUp onReset
Ocurre cuando...
Presionado el botn del ratn El ratn se aleja del elemento El ratn se posa sobre el elemento Se libera el botn del ratn Peticin de borrado de formulario. Se devuelve false si no se desea borrar La ventana se redimensiona Peticin de envo de formulario. Se devuelve false si no se desea enviar El documento se descarga
Soportado por el/los elemento/s

Document, Link, Image y Button. Link, Image y Layer. Link, Image y Layer Document, Link, Image y Button. Form.
onResize onSubmit
Window. Form.
onUnload
Document.
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
Objeto
Button Checkbox FileUpload Hidden Option Password Radio Reset Select Submit Text Textarea
Etiqueta HTML
<INPUT TYPE=button> <INPUT TYPE=checkbox> <INPUT TYPE=file> <INPUT TYPE=hidden> <OPTION> <INPUT TYPE=password> <INPUT TYPE=radio> <INPUT TYPE=reset> <SELECT> <INPUT TYPE=submit> <INPUT TYPE=text> <TEXTAREA>
Descripcin y Evento
Se pulsa el botn. onClick. Se selecciona el cuadro. onClick. Campo de entrada para introducir el nombre de un fichero a descargar. onChange. Elemento de formulario no visible. Sin Eventos. Item individual de una lista de seleccin (<SELECT>). EVENTOS EN <SELECT>. Campo de entradas ocultas. onChange. Se selecciona uno de los botones. onClick. Botn que limpia el formulario. onClick. Lista desplegable de opciones. onChange. Botn de envo de formulario. onClick. Lnea sencilla de texto. onChange, onBlur. Mltiples lneas de texto. onChange, onBlur.
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 horarios. Tratamiento de fechas y valores
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);
Mtodo
getDate() getDay() getHours() getMinutes() getMonth() getSeconds() getTime()
Accin
Devuelve el da del mes actual. Devuelve el da de la semana actual [0..6]. Devuelve la hora actual (hh). Devuelve los minutos actuales (mm). Devuelve el mes actual (nn) [0..11]. Devuelve los segundos actuales (ss). Devuelve la FECHA actual en milisegundos (nnnnn..nn) desde el 1/1/1970.
Objeto Date (II)

Mtodo
getTimezoneOffset() getYear() - Desaprobado setDate(dd) setHours(hh) setMinutes(mm) setMonth(mm) setSeconds(ss) setTime(nnnnnnnn) setYear(aa o aaaa) - Desaprobado toGMTString() toLocaleString()
Accin
Diferencia en minutos entre la hora actual y la GMT. Devuelve el ao actual (aa o aaaa, segn navegador). Establece el da del mes. Establece la hora. Establece los minutos. Establece el mes. [0..11] Establece los segundos. Establece en milisegundos la FECHA transcurrida entre el 1/1/1970 y la fecha en cuestin. Establece el ao. Devuelve el valor del objeto fecha en GMT como una cadena. Devuelve el valor del objeto fecha como una cadena en formato local.
Nuevos mtodos de Date (JS 1.3)
Mtodo
getFullYear() setFullYear(aaaa, [mm], [dd])
Accin
Devuelve el ao en formato aaaa. Establece el ao. Opcionalmente, mes-1 y da.
Ejemplos sobre Date()
El objeto Math()
Acceso a propiedades:
Math.propiedad
Propiedades y Mtodos Estticos
Acceso a mtodos:
Math.mtodo(param1, param2, ..., paramN);
Propiedad
E LN2 LN10 LOG2E LOG10E PI SQRT1_2 SQRT2
Valor
Constante de Euler o nmero e. Logaritmo neperiano (base e) de 2. Logaritmo neperiano de 10. Logaritmo en base 2 de e. Logaritmo en base 10 de e. Nmero . Raz cuadrada de . Raz cuadrada de 2.
Mtodos de Math (I)

Mtodo
abs(n) acos(n) asin(n) atan(n) ceil(n) cos(n) exp(n) floor(n) log(n) max(x,y) min(x,y) Calcula el arcocoseno de n. Calcula el arcoseno de n. Calcula la arcotangente de n. Redondea un nmero al prximo entero. Calcula el coseno de n. Calcula un exponencial del nmero e. Redondea un nmero eliminando su parte decimal (trunca). Calcula el logaritmo natural de n. Devuelve el mayor de {x,y}. Devuelve el menor de {x,y}.
Accin
Calcula el valor absoluto de n.
Mtodos de Math (II)

Mtodo
pow(x,y) random() round(n) sin(n) sqrt(n) tan(n) Calcula la potencia xy. Genera un nmero aleatorio entre [0,1]. Redondea al nmero entero ms cercano [,0 .. ,49] por defecto [,50 .. ,99] por exceso. Calcula el seno de n. Calcula la raz cuadrada de n. Calcula la tangente de n.
Accin
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 "/cgibin/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(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 yycomas ooespacios El valor de las cookies no puede contener comas, puntos comas espacios en blanco. Por este motivo es conveniente aplicarle al valor la funcin en blanco. Por este motivo es conveniente aplicarle al valor la funcin escape(), para que codifique estos smbolos yyse pueda almacenar escape(), para que codifique estos smbolos se pueda almacenar correctamente. La lectura de la cookie se har posteriormente con la funcin correctamente. La lectura de la cookie se har posteriormente con la funcin unescape(). 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(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: " homer@simpsons.com" };
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; Propiedades this.anio=anio; }
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

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Javascript

Uploaded by

Copyright:

Available Formats

JAVASCRIPT

JavaScript Bible 3rd. Edition

Navegador web con soporte JavaScript

Conocimientos previos de HTML

Versiones de JavaScript / JScript

Qu no puede hacer JavaScript

Usando JavaScript en HTML

Determinar versin JavaScript

Determinar versin JScript

Ubicacin del cdigo

Nombres de identificadores (I)

function goto function goto native native short short

package private package private switch switch var var

synchronized this synchronized this val val while while

transient true transient true

Tipos de literales numricos

Valores numricos Especiales

Constantes numricas especiales

(*) Slo MSIE 4.0+ y nuevos navegadores.

Trabajando con cadenas (I)

Determinar la longitud de cadena:

Trabajando con cadenas (I)

Mtodo charAt (n).

Encontrar posicin de la primera ocurrencia de una subcadena de una cadena:

Declaracin de variables (I)

Declaracin de variables (II)

Se puede dar valor inicial a las variables a la vez que se declaran:

Declaracin de variables (III)

Ejemplos de declaraciones invlidas:

document.write() del browser

Depurar errores JavaScript

Lista de caracteres escapados

Ejemplo de cdigos escapados

mbito de las variables

+ NOTA: Si la parte izquierda de una condicin AND es falsa no

== != === !== > < >= <=

Otros operadores: typeof

Otros operadores: new

Acceso a elementos de <form>

<input type=text name=visor value=..>

Forma general de acceder a un elemento:

Ejemplos sentencia bsica if

Seleccin por casos: switch

Bucle for (I)

Bucle for (II)

Uso con sentencias break y continue.

Ejemplo de sentencia break

Salida del ejemplo anterior

Ejemplo de confirm (II)

Entrada de datos usuario Valor inicial

Devolver la entrada de datos

Argumentos de una funcin

Agregar elementos a un array

Longitud total del array:

Acceso a los elementos:

Mtodos del objeto Array

Aplicados al objeto array: Aplicados al objeto array:

Mtodos push() / pop()

Mtodos unshift() / shift()

Solucin en JavaScript1.3 para dichos navegadores toSource().

Modos de incluir JS en html

El atributo ARCHIVE Netscape

Ejemplos en manejadores de eventos:

Eventos onLoad() y onUnload()