Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Java Script
Java Script
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
Professional JavaScript
Varios autores Editorial Wrox
Pure JavaScript
Editorial SAMS
Herramientas necesarias
Editor de texto ASCII
Notepad de Windows UltraEdit 32 vi/vim ...
Microsoft Internet Explorer 4.0+ Netscape Navigator 4.0x+ Opera Mozilla / Mozilla Firefox ...
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.
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...
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>
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(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 abstract boolean 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 extends false false int int new new static static implements implements null null super super try try
instance of instance of interface interface long long protected protected public public throw throw with with return return throws throws
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
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.
Operador suma +. Propiedad length. Mtodo substring (inicio, fin). Mtodo substring (inicio). Mtodo substr (inicio, long). Mtodo substr (inicio).
Obtener subcadenas:
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.
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;
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.
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 || && !
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
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));
Ejemplo:
document.calc.visor.value=5;
Prctica
Sentencia bsica if
Sintaxis: if (expresin) sentencia; if (expresin) { conjunto de sentencias; }
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.
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 Por qu qu en en el el ejemplo ejemplo no no existen existen sentencias sentencias break; 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, 0,1, 1,2, 2,3, 3,4, 4,5, 5,6, 6,7, 7,8, 8,9, 9, var contador = 0; Preincremento while (contador < 10) document.write ((++contador) + "<br>"); 1, 1,2, 2,3, 3,4, 4,5, 5,6, 6,7, 7,8, 8,9, 9,10, 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);
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) { ... }
Sentencia break
Causa la salida inmediata del bucle o del switch que la contiene. Sintaxis: break; break etiqueta;
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
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
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)); }
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";
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]);
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 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
Prctica
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.
JavaScript en URLs
Ejemplos URL:
<a href="javascript: alert('Hola Mundo');"> Saludo </a> <a href="javascript: calculaTotal();"> Calcular el Total</a>
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).
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, self, window, window, parent, parent, top top plugins plugins [ [] ] mimeTypes mimeTypes [ [] ]
navigator navigator
frames frames [ [] ]
Window Window
location location
elements elements[ [] ] array arrayde deobjetos objetosde de Formulario Formulario(Form): (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
Nombrar objetos
El objeto window se asume por defecto, por lo que no es necesario nombrarlo. Ejemplo:
self.document.forms[0] document.forms[0]
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.
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)
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
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.
A B
La La ventana ventana B B puede puede referirse referirse a a la la A Aa a travs travs de de la la propiedad propiedad opener. opener.
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);
Intervalos: setInterval()
Establece una llamada peridica, cada intervalo especificado como parmetro en milisegundos. Sintaxis:
var identificador = setInterval ("nom-funcin", tiempo-ms);
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
NETSCAPE NETSCAPENavigator Navigator4.76 4.76 navigator.appName : :Netscape navigator.appName Netscape navigator.appVersion: navigator.appVersion:4.76 4.76[en] [en](Windows (WindowsNT NT5.0; 5.0;U) U) navigator.userAgent: Mozilla/4.76 [en] (Windows NT navigator.userAgent: Mozilla/4.76 [en] (Windows NT5.0; 5.0;U) U) navigator.appCodeName: Mozilla navigator.appCodeName: Mozilla navigator.platform : :Win32 navigator.platform Win32
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).
Si los frames tienen nombre asignado, pueden referirse tambin a travs de l (conveniente).
Documento html
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.
Ejemplo:
if (condicion) document.URL=pagina2.html; else document.URL=pagina3.html;
Prctica
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; }
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>
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
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
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();">
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:
<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>.
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
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.
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.
Mtodo
getFullYear() setFullYear(aaaa, [mm], [dd])
Accin
Devuelve el ao en formato aaaa. Establece el ao. Opcionalmente, mes-1 y da.
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.
Accin
Calcula el valor absoluto de n.
Accin
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: 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.
El Elvalor valorde delas lascookies cookiesno nopuede puedecontener contenercomas, comas,puntos puntosyycomas comasooespacios 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 escape() paraque quecodifique codifiqueestos estossmbolos smbolosyyse sepueda puedaalmacenar almacenar correctamente. La lectura de la cookie se har posteriormente correctamente. La lectura de la cookie se har posteriormentecon conla lafuncin funcin unescape() .. unescape()
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" };
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); }
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);
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
Prctica