Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Se trata de un lenguaje de tipo script compacto, basado en objetos y guiado por eventos diseado especficamente para el desarrollo de aplicaciones cliente-servidor dentro del mbito de Internet. Los programas JavaScript van incrustados en los documentos HMTL, y se encargan de realizar acciones en el cliente, como pueden ser pedir datos, confirmaciones, mostrar mensajes, crear animaciones, comprobar campos...
Versiones
El programa que va a interpretar los programas JavaScript es el propio navegador, lo que significa que si el nuestro no soporta JavaScript, no podremos ejecutar las funciones que programemos. Desde luego, Netscape y Explorer lo soportan, el primero desde la versin 2 y el segundo desde la versin 3. Navegador Nestcape 2 Nestcape 3 Nestcape 4 Nestcape 6 Version de JavaScript Javascript 1.0 Javascript 1.1 Soporte ECMA ----ECMA-262-compliant
Internet Explorer 2 No soporta JavaScript Internet Explorer 3 Javascript 1.0 Internet Explorer 4 Javascript 1.2
Javascript 1.2 - 1.3 incompleta ECMA-262-compliant hasta la version 4.5 ECMA compliant Javascript 1.4 Full ECMAScript-262
Internet Explorer 5 ECMA compliant Javascript 1.3 Full ECMAScript-262 Las diferentes versiones de JavaScript han sido finalmente integradas en un estndar denominado ECMAScript-262. Dicho estndar ha sido realizado por la organizacin ECMA dedicada a la estandarizacin de informacin y sistemas de comunicacin. Las versiones actuales de los navegadores soportan este estndar, as que basaremos el curso sobre l.
El archivo externo simplemente es un archivo del texto que contiene cdigo JavaScript, y cuyo nombre acaba con la extensin js. Puede incluirse tambin cdigo JavaScript como respuesta a algn evento:
de
hacer
click');return
Nota: Los scripts pueden incluirse como comentarios para asegurar que su cdigo no es "visto" por navegadores viejos que no reconocen JavaScript y as evitar errores.
<script ....> <!Cdigo JavaScript //--> </script>
Gramtica
Si conoce algn otro lenguaje de programacin ya estar familiarizado con el uso de variables, operadores, declaraciones... Lo que se resume en la tabla siguiente son los elementos principales de la gramtica de JavaScript. Cada uno de los elementos se ver en detalle a lo largo del manual. Nota importante: JavaScript es sensible a maysculas y minsculas, todos los elementos de JavaScript deben referenciarse cmo se definieron, no es lo mismo "Salto" que "salto". Variables Etiquetas que se refieren a un valor cambiante.
Operadores
Pueden usarse para calcular o comparar valores. Ejemplo: pueden sumarse dos valores, pueden compararse dos valores...
Expresiones
Cualquier combinacin de variables, operadores, y declaraciones que evalan a algn resultado. Ejemplo: intTotal=100; intTotal > 100
Sentencias
Una sentencia puede incluir cualquier elemento de la grmatica de JavaScript. Las sentencias de JavaScript pueden tomar la forma de condicional, bucle, o manipulaciones del objeto. La forma correcta para separarlas es por punto y coma, esto slo es obligatorio si las declaraciones mltiples residen en la misma lnea. Aunque es recomedable que se acostumbre a terminar cada instruccin con un punto y coma, se ahorrar problemas.
Objetos
Estructura "contenedora" de valores, procedimientos y funciones, cada valor refleja una propiedad individual de ese objeto.
Funciones y Mtodos
Una funcin de JavaScript es bastante similar a un" procedimiento" o" subprograma" en otro lenguaje de programacin. Una funcin es un conjunto que realizan alguna accin. Puede aceptar los valores entrantes (los parmetros), y puede devolver un valor saliente. Un mtodo simplemente es una funcin contenida en un objeto.
Variables
Las variables almacenan y recuperan datos, tambin conocidos como "valores". Una variable puede referirse a un valor que cambia o se cambia. Las variables son referenciadas por su nombre, y el nombre que les es asignado debe ser conforme a ciertas reglas (debe empezar con una letra o ("_"); los carcteres siguientes pueden ser nmeros (0-9), letras maysculas o letras minsculas). Ejemplos de definicioneserrneas:
var Mi Variable, 123Probando, $Variable, for, while;
Las variables en JavaScript pueden ser de alcance global o local. Una variable global es accesible desde cualquier <script> de la pgina mientras que una variable local slo lo es desde la funcin en la que fue declarada. Normalmente, usted crea una nueva variable global asignndole simplemente un valor:
globalVariable=5;
Sin embargo, si usted est codificando dentro de una funcin y usted quiere crear una variable local que slo tenga alcance dentro de esa funcin, debe declarar la nueva variable haciendo uso de var:
function newFunction() { var localVariable=1; globalVariable=0; ... }
Tipos de datos
Javascript reconoce seis tipos de valores diferentes: numricos, lgicos, objetos, cadenas, nulos e indefinidos. JavaScript tiene la peculiaridad de ser un lenguaje dbilmente tipado, esto es, una variable puede cambiar de tipo durante su vida, por ejemplo uno puede declarar una variable que ahora sea un entero y ms adelante una cadena.
MiVariable=4;
y despus:
MiVariable="Una_Cadena";
A diferencia de otros lenguajes y como ya hemos visto, en Javascript no es necesario declarar las variables especificando el tipo de dato que contendrn, ser el propio interprete el que le asignar el tipo apropiado. (Esto es as para seguir la filosofa de diseo de Javascript que indica que se realizan programas pequeos y que la idea es lograr que el programador realice los scripts de la manera ms rpida posible). Tipos de Datos: Nmeros Enteros o coma flotante.
Boleanos
True o False.
Cadenas
Los tipos de datos cadena deben ir delimitados por comillas simples o dobles.
Objetos
Nulos
Null
Indefinidos
Un valor indefinido es el que corresponde a una variable que ha sido creada pero no le ha sido asignado un valor.
Operadores
Los operadores toman una o ms variables o valores (los operando) y devuelve un nuevo valor; por ejemplo el ' +' operador puede agregar dos nmeros para producir un tercero. Lo operadores estn clasificados en varias clases dependiendo de la relacin que ellos realizan:
Operadores Aritmticos
Los operadores aritmticos toman los valores numricos (literales o variables) como sus operando y devuelve un solo valor numrico. Los operadores aritmticos normales son:
Operador
Nombre
Ejemplo
Descripcin
Suma
5 + 6 7 - 9 6 * 3 4 / 8
Substraccin
Multiplicacin
Divisin
7 % 2
++
Incremento.
a++ a--
--
Decremento.
-a
<html> <head> <title>Ejemplo de JavaScript</title> </head> <body> <script language="JavaScript"> a = 8; b = 3; document.write(a + b);
document.write("<br>"); document.write(a - b); document.write("<br>"); document.write( a * b); document.write("<br>"); document.write(a / b); document.write("<br>"); a++; document.write(a); document.write("<br>"); b--; document.write(b); </script> </body> </html>
Operadores de comparacin
Un operador de la comparacin compara sus operando y devuelve un valor lgico basado en si la comparacin es verdad o no. Los operando pueden ser numricos o cadenas. Operador Descripcin
==
===
!=
!==
>
" Mayor que" devuelve true si el operador de la izquierda es mayor que el de la derecha.
>=
" Mayor o igual que " devuelve true si el operador de la izquierda es mayor o igual que el de la derecha.
<
" Menor que" devuelve true si el operador de la izquierda es menor que el de la derecha.
<=
"Menor o igual que" devuelve true si el operador de la izquierda es menor o igual que el de la derecha.
Nota: En JavaScript 1.3 y JavaScript 1.1 o anteriores, los operadores de comparacin realizaban 'una conversin de tipos' si era necesario. Es decir, si un operando era una cadena y el otro era un valor numrico, JavaScript realizaba la conversin de la cadena a numrico antes de realizar la comparacin.
JavaScript 1.2 no realizaba 'conversiones de tipo', por eso si dos operadores eran de tipos distintos no se realizaba la comparacin. Finalmente, en las ltimas versiones de JavaScript se aaden los operadores de 'comparacin estricta', los cuales realizarn la comparacin si los dos operandos son del mismo tipo.
<html> <head> <title>Ejemplo de JavaScript</title> </head> <body> <script language="JavaScript"> a = 8; b = 3; c = 3; document.write(a == b);document.write("<br>"); document.write(a != b);document.write("<br>"); document.write(a < b);document.write("<br>"); document.write(a > b);document.write("<br>"); document.write(a >= c);document.write("<br>"); document.write(b <= c);document.write("<br><br>"); document.write(3 == "3");document.write("<br>"); document.write(3 === "3");document.write("<br>"); </script> </body> </html>
Operadores Lgicos
Los operadores Lgicos se utilizan para combinar mltiples comparaciones en una expresin condicional. Un operador lgico toma dos operandos cada uno de los cuales es un valor true o false y devuelve un valor true o false. Operador Descripcin
&&
||
<html> <head> <title>Ejemplo de JavaScript</title> </head> <body> <script language="JavaScript"> a = 8; b = 3; c = 3; document.write( (a == b) && (c > b) );document.write("<br>"); document.write( (a == b) || (b == c) );document.write("<br>"); document.write( !(b <= c) );document.write("<br>"); </script>
</body> </html>
Operadores de Cadena
Los valores cadena pueden compararse usando los operadores de comparacin. Adicionalmente, usted puede concatenar cadenas usando el operador +
<html> <head> <title>Ejemplo de JavaScript</title> </head> <body> <script language="JavaScript"> Nombre = "Jose" document.write( "Hola " + Nombre +"." ); </script> </body> </html>
Operadores de Asignacin
El operador de asignacin '=' le permite asignar un valor a una variable. Operador Descripcin
+= (tambien - =, * =, / =)
Aade el valor del operando de la derecha a la variable de la izquierda. Ejemplo: inttotal +=100
<html> <head> <title>Ejemplo de JavaScript</title> </head> <body> <script language="JavaScript"> a = 8; b = 3; a += 3; document.write(a);document.write("<br>"); a -= 2; document.write(a);document.write("<br>"); b *= 2; document.write(b); </script> </body> </html>
Operadores especiales
Varios operadores de JavaScript, es difcil clasificarlos en una categora en particular. Estos operadores se resumen a continuacin. Operador Descripcin
Asigna un valor especificado a una variable si la condicin es true, por otra parte asigna un valor alternativo si la condicin es false.
New
This
Delete
El operador delete borra un objeto, una propiedad de un objeto, o un elemento especificado de un vector.
Void
El operador Void especifica una expresin que ser evaluada sin devolver ningn valor.
Typeof
Objetos
Una primera clasificacin del modelo de objetos lo dividira en dos grandes grupos. una parte, tendramos los objetos directamente relacionados con el navegador y posibilidades de programacin HTML (denominados, genricamente,objetos navegador) y por otra parte un conjunto de objetos relacionados con la estructura lenguaje, llamados genricamenteobjetos del lenguaje. Por las del del
El Objeto String
Este objeto nos permite hacer diversas manipulaciones con las cadenas, para que trabajar con ellas sea ms sencillo. Cuando asignamos una cadena a una variable, JS est creando un objeto de tipo String que es el que nos permite hacer las manipulaciones.
Propiedades length. Valor numrico que nos indica la longitud en caracteres de la cadena dada. prototype. Nos permite asignar nuevas propiedades al objeto String.
<HTML> <HEAD> <title>Ejemplo de JavaScript</title> </HEAD> <BODY> <script LANGUAGE="JavaScript"> <!-var cad = "Hello World",i; var ja = new Array(); ja = cad.split("o"); with(document) { write("La cadena es: "+cad+"<BR>"); write("Longitud de la cadena: "+cad.length+"<BR>");
10
write("Haciendola ancla: "+cad.anchor("b")+"<BR>"); write("En grande: "+cad.big()+"<BR>"); write("Parpadea: "+cad.blink()+"<BR>"); write("Caracter 3 es: "+cad.charAt(3)+"<BR>"); write("Fuente FIXED: "+cad.fixed()+"<BR>"); write("De color: "+cad.fontcolor("#FF0000")+"<BR>"); write("De color: "+cad.fontcolor("salmon")+"<BR>"); write("Tamao 7: "+cad.fontsize(7)+"<BR>"); write("<I>orl</I> esta en la posicion: "+cad.indexOf("orl")); write("<BR>En cursiva: "+cad.italics()+"<BR>"); write("La primera <I>l</I> esta, empezando a contar por detras,"); write(" en la posicion: "+cad.lastIndexOf("l")+"<BR>"); write("Haciendola enlace: "+cad.link("doc.htm")+"<BR>"); write("En pequeo: "+cad.small()+"<BR>"); write("Tachada: "+cad.strike()+"<BR>"); write("Subindice: "+cad.sub()+"<BR>"); write("Superindice: "+cad.sup()+"<BR>"); write("Minusculas: "+cad.toLowerCase()+"<BR>"); write("Mayusculas: "+cad.toUpperCase()+"<BR>"); write("Subcadena entre los caracteres 3 y 10: "); write(cad.substring(2,10)+"<BR>"); write("Entre los caracteres 10 y 3: "+cad.substring(10,2)+"<BR>"); write("Subcadenas resultantes de separar por las <B>o:</B><BR>"); for(i=0;i<ja.length;i++) write(ja[i]+"<BR>"); } //--> </script> </BODY> </HTML>
El Objeto Array
Este objeto nos va a dar la facilidad de construir arrays cuyos elementos pueden contener cualquier tipo bsico, y cuya longitud se modificar de forma dinmica siempre que aadamos un nuevo elemento (y, por tanto, no tendremos que preocuparnos de esa tarea). Para poder tener un objeto array, tendremos que crearlo con su constructor, por ejemplo, si escribimos:
a=new Array(15);
tendremos creada una variable a que contendr 15 elementos, enumerados del 0 al 14. Para acceder a cada elemento individual usaremos la notacin a[i], donde i variar entre0 y N-1, siendo N el nmero de elementos que le pasamos al constructor. Tambin podemos inicializar el array a la vez que lo declaramos, pasando los valores que queramos directamente al constructor, por ejemplo:
a=new Array(21,"cadena",true);
que nos muestra, adems, que los elementos del array no tienen por qu ser del mismo tipo. Por tanto: si ponemos un argumento al llamar al constructor, este ser el nmero de elementos del array (y habr que asignarles valores posteriormente), y si ponemos ms de uno, ser la forma de inicializar el array con tantos elementos como argumentos reciba el constructor. Podramos poner como mencin especial de esto lo siguiente. Las inicializaciones que vemos a continuacin:
11
Inicializan el array a, en el primer caso, con un elemento cuyo contenido es la cadenacadena, y en el segundo caso con un elemento cuyo contenido es false. Lo comentado anteriormente sobre inicializacin de arrays con varios valores, significa que si escribimos
a=new Array(2,3);
NO vamos a tener un array con 2 filas y 3 columnas, sino un array cuyo primer elemento ser el 2 y cuyo segundo elemento ser el 3. Entonces, cmo creamos un array bidimensional? (un array bidimensional es una construccin bastante frecuente). Creando un array con las filas deseadas y, despus, cada elemento del array se inicializar con un array con las columnas deseadas. Por ejemplo, si queremos crear un array con 4 filas y 7 columnas, bastar escribir:
a=new Array(4); for(i=0;i<4;i++) a[i]=new Array(7);
Propiedades length. Esta propiedad nos dice en cada momento la longitud del array, es decir,
cuntos elementos tiene. prototype. Nos permite asignar nuevas propiedades al objeto String.
<HTML> <HEAD> <title>Ejemplo de JavaScript</title> </HEAD> <BODY> <script LANGUAGE="JavaScript"> <!-var j=new Array(2),h=new Array(1), i=new Array(1,"Hola",3); var b=new Array("Palabra","Letra","Amor","Color","Cario"); var c=new Array("Otra cadena con palabras"); var d=new Array(false); j[0]=new Array(3); j[1]=new Array(2); j[0][0]=0; j[0][1]=1; j[0][2]=2; j[1][0]=3; j[1][1]=4; j[1][2]=5; document.write(c); document.write("<P>"+d+"<P>"); document.write("j[0][0]="+j[0][0]+"; j[0][1]="+j[0][1]+ "; j[0][2]="+j[0][2]+"<BR>");
12
document.write("j[1][0]="+j[1][0]+"; j[1][1]="+j[1][1]+ "; j[1][2]="+j[1][2]); document.write("<P>h= "+(h[0]='Hola')+"<P>"); document.write("i[0]="+i[0]+"; i[1]="+i[1]+"; i[2]="+i[2]+"<P>"); document.write("Antes de ordenar: "+b.join(', ')+"<P>"); document.write("Ordenados: "+b.sort()+"<P>"); document.write("Ordenados en orden inverso: "+b.sort().reverse()); //--> </script> </BODY> </HTML>
El Objeto Math
Este objeto se utiliza para poder realizar clculos en nuestros scripts. Tiene la peculiaridad de que sus propiedades no pueden modificarse, slo consultarse. Estas propiedades son constantes matemticas de uso frecuente en algunas tareas, por ello es lgico que slo pueda consultarse su valor pero no modificarlo.
Propiedades E. Nmero 'e', base de los logaritmos naturales (neperianos). LN2. Logaritmo neperiano de 2. LN10. Logaritmo neperiano de 10. LOG2E. Logaritmo en base 2 de e. LOG10E. Logaritmo en base 10 de e. PI. Nmero PI. SQRT1_2. Raz cuadrada de 1/2. SQRT2. Raz cuadrada de 2.
Mtodos abs(numero). Funcin valor absoluto. acos(numero). Funcin arcocoseno. Devuelve un valor cuyas unidades son radianes
o NaN. 'numero' debe pertenecer al rango [-1,1], en otro caso devuelve NaN. asin(numero). Funcin arcoseno. Devuelve un valor cuyas unidades son radianes o NaN. 'numero' debe pertenecer al rango [-1,1], en otro caso devuelve NaN. atan(numero). Funcin arcotangente. Devuelve un valor cuyas unidades son radianes o NaN. atan2(x,y). Devuelve el ngulo formado por el vector de coordenadas (x,y) con respecto al eje OX. ceil(numero). Devuelve el entero obtenido de redondear 'numero' "por arriba". cos(numero). Devuelve el coseno de 'numero' (que debe estar en radianes) o NaN. exp(numero). Devuelve el valor enumero. floor(numero). Devuelve el entero obtenido de redondear 'numero' "por abajo". log(numero). Devuelve el logaritmo neperiano de 'numero'. max(x,y). Devuelve el mximo de 'x' e 'y'. min(x,y). Devuelve el mnimo de 'x' e 'y'. pow(base,exp). Devuelve el valor baseexp. random(). Devuelve un nmero pseudoaleatorio entre 0 y 1. round(numero). Redondea 'numero' al entero ms cercano. sin(numero). Devuelve el seno de 'numero' (que debe estar en radianes) o NaN. sqrt(numero). Devuelve la raz cuadrada de nmero.
13
El Objeto Date
Este objeto nos va a permitir hacer manipulaciones con fechas: poner fechas, consultarlas... para ello, debemos saber lo siguiente: JS maneja fechas en milisegundos. Los meses de Enero a Diciembre vienen dados por un entero cuyo rango vara entre el 0 y el 11 (es decir, el mes 0 es Enero, el mes 1 es Febrero, y as sucesivamente), los das de la semana de Domingo a Sbado vienen dados por un entero cuyo rango vara entre 0 y 6 (el da 0 es el Domingo, el da 1 es el Lunes, ...), los aos se ponen tal cual, y las horas se especifican con el formato HH:MM:SS. Podemos crear un objeto Date vaco, o podemos crealo dndole una fecha concreta. Si no le damos una fecha concreta, se crear con la fecha correspondiente al momento actual en el que se crea. Para crearlo dndole un valor, tenemos estas posibilidades:
var var var var var Mi_Fecha Mi_Fecha Mi_Fecha Mi_Fecha Mi_Fecha = = = = = new new new new new Date(ao, Date(ao, Date(ao, Date(ao, Date(ao, mes); mes, da); mes, da, horas); mes, da, horas, minutos); mes, da, horas, minutos, segundos);
En da pondremos un nmero del 1 al mximo de das del mes que toque. Todos los valores que tenemos que pasar al constructor son enteros. Pasamos a continuacin a estudiar los mtodos de este objeto.
Mtodos getDate(). Devuelve el da del mes actual como un entero entre 1 y 31. getDay(). Devuelve el da de la semana actual como un entero entre 0 y 6. getHours(). Devuelve la hora del da actual como un entero entre 0 y 23. getMinutes(). Devuelve los minutos de la hora actual como un entero entre 0 y
59.
getMonth(). Devuelve el mes del ao actual como un entero entre 0 y 11. getSeconds(). Devuelve los segundos del minuto actual como un entero entre 0 y
59.
14
El Objeto Boolean
Este objeto nos permite crear booleanos, esto es, un tipo de dato que es cierto o falso, tomando los valores true o false. Podemos crear objetos de este tipo mediante su constructor. Veamos varios ejemplos:
a a a a a a = = = = = = new new new new new new Boolean(); asigna a 'a' el valor 'false' Boolean(0); asigna a 'a' el valor 'false' Boolean(""); asigna a 'a' el valor 'false' Boolean(false); asigna a 'a' el valor 'false' Boolean(numero_distinto_de_0); asigna a 'a' el valor 'true' Boolean(true); asigna a 'a' el valor 'true'
El Objeto Number
Este objeto representa el tipo de dato nmero con el que JS trabaja. Podemos asignar a una variable un nmero, o podemos darle valor, mediante el constructor Number, de esta forma:
a = new Number(valor);, por ejemplo, a = new Number(3.2); da a a el valor 3.2. Si no pasamos algn valor al constructor, la variable se inicializar con el valor 0.
Propiedades MAX_VALUE. Valor mximo que se puede manejar con un tipo numrico MIN_VALUE. Valor mnimo que se puede manejar con un tipo numrico NaN. Representacin de un dato que no es un nmero NEGATIVE_INFINITY. Representacin del valor a partir del cual hay
desbordamiento negativo (underflow) POSITIVE_INFINITY. Representacin del valor a partir del cual hay desbordamiento positivo (overflow)
porque JS nos dir undefined, tenemos que hacerlo directamente sobre Number, es decir, tendremos que consultar los valores que hay en Number.MAX_VALUE,Number.MIN_VALUE, etc.
Jerarqua
Con esta entrega comienza la descripcin de las propiedades y los mtodos de los objetos del navegador. No es mi intencin hacer una descripcin exhaustiva de todas y cada una de las propiedades y mtodos, objeto por objeto, con todo detalle. Mi intencin es hacer una descripcin ms o menos detallada de las propiedades y mtodos que tienen ms posibilidad de ser usados. Es decir, que si me dejo alguna propiedad y/o mtodo por
15
comentar, siempre podeis buscarla los manuales de referencia de los respectivos navegadores. En este captulo vamos a estudiar la jerarqua que presentan los objetos del navegador, atendiendo a una relacin "contenedor - contenido" que se da entre estos objetos. De forma esquemtica, esta jerarqua podemos representarla de esta manera (al lado est la directiva HTML con que se incluyen en el documento objetos de este tipo, cuando exista esta directiva): * window + history + location + document <BODY> ... </BODY> - anchor <A NAME="..."> ... </A> - applet <APPLET> ... </APPLET> - area <MAP> ... </MAP> - form <FORM> ... </FORM> + button <INPUT TYPE="button"> + checkbox <INPUT TYPE="checkbox"> + fileUpload <INPUT TYPE="file"> + hidden <INPUT TYPE="hidden"> + password <INPUT TYPE="password"> + radio <INPUT TYPE="radio"> + reset <INPUT TYPE="reset"> + select <SELECT> ... </SELECT> - options <INPUT TYPE="option"> + submit <INPUT TYPE="submit"> + text <INPUT TYPE="text"> + textarea <TEXTAREA> ... </TEXTAREA> - image <IMG SRC="..."> - link <A HREF="..."> ... </A> - plugin <EMBED SRC="..."> + frame <FRAME> * navigator Segn esta jerarqua, podemos entender el objeto area (por poner un ejemplo) como un objeto dentro del objeto document que a su vez est dentro del objeto window. Hay que decir que la notacin '.' tambin se usa para denotar a un objeto que est dentro de un objeto. Por ejemplo, si queremos hacer referencia a una caja de texto, tendremos que escribir
ventana.documento.formulario.caja_de_texto
donde ventana es el nombre del objeto window (su nombre por defecto es window),documento es el nombre del objeto document (cuyo nombre por defecto es document),formulario es el nombre del objeto forms (veremos que forms es un array) ycaja_de_texto es el nombre del objeto textarea (cuyo nombre por defecto es textarea). En la mayora de los casos podemos ignorar la referencia a la ventana actual (window), pero ser necesaria esta referencia cuando estemos utilizando mltiples ventanas, o cuando usemos frames. Cuando estemos usando un nico frame, podemos pues ignorar explcitamente la referencia al objeto window, ya que JS asumir que la referencia es de la ventana actual. Tambin podemos utilizar la notacin de array para referirnos a algn objeto, por ejemplo, cuando los objetos a usar no tienen nombre, como en este caso:
document.forms[0].elements[1];
16
hace referencia al segundo elemento del primer formulario del documento; este elemento ser el segundo que se haya creado en la pgina HTML.
El objeto window
Se trata del objeto ms alto en la jerarqua del navegador(navigator es un objeto independiente de todos en la jerarqua), pues todos los componentes de una pgina web estn situados dentro de una ventana. El objeto window hace referencia a la ventana actual. Veamos a continuacin sus propiedades y sus mtodos.
Mtodos alert(mensaje). Muestra el mensaje 'mensaje' en un cuadro de dilogo blur(). Elimina el foco del objeto window actual. A partir de NS 3, IE 4. clearInterval(id). Elimina el intervalo referenciado por 'id' (ver el mtodo
setInterval(), tambin del objeto window). A partir de NS 4, IE 4. clearTimeout(nombre). Cancela el intervalo referenciado por 'nombre' (ver el mtodo setTimeout(), tambin del objeto window). close(). Cierra el objeto window actual. confirm(mensaje). Muestra un cuadro de dilogo con el mensaje 'mensaje' y dos botones, uno de aceptar y otro de cancelar. Devuelve true si se pulsa aceptar y devuelve false si se pulsa cancelar. focus(). Captura el foco del ratn sobre el objeto window actual. A partir de NS 3, IE 4. moveBy(x,y). Mueve el objeto window actual el nmero de pixels especificados por (x,y). A partir de NS 4. moveTo(x,y). Mueve el objeto window actual a las coordenadas (x,y). A partir de NS 4. open(URL,nombre,caracteristicas). Abre la URL que le pasemos como primer parmetro en una ventana de nombre 'nombre'. Si esta ventana no existe, abrir una ventana nueva en la que mostrar el contenido con las caractersticas
17
especificadas. Las caractersticas que podemos elegir para la ventana que queramos abrir son las siguientes: o toolbar = [yes|no|1|0]. Nos dice si la ventana tendr barra de herramientas (yes,1) o no la tendr (no,0). o location = [yes|no|1|0]. Nos dice si la ventana tendr campo de localizacin o no. o directories = [yes|no|1|0]. Nos dice si la nueva ventana tendr botones de direccin o no. o status = [yes|no|1|0]. Nos dice si la nueva ventana tendr barra de estado o no. o menubar = [yes|no|1|0]. Nos dice si la nueva ventana tendr barra de mens o no. o scrollbars = [yes|no|1|0]. Nos dice si la nueva ventana tendr barras de desplazamiento o no. o resizable = [yes|no|1|0]. Nos dice si la nueva ventana podr ser cambiada de tamao (con el ratn) o no. o width = px. Nos dice el ancho de la ventana en pixels. o height = px. Nos dice el alto de la ventana en pixels. o outerWidth = px. Nos dice el ancho *total* de la ventana en pixels. A partir de NS 4. o outerHeight = px. Nos dice el alto *total* de la ventana el pixels. A partir de NS 4 o left = px. Nos dice la distancia en pixels desde el lado izquierdo de la pantalla a la que se debe colocar la ventana. o top = px. Nos dice la distancia en pixels desde el lado superior de la pantalla a la que se debe colocar la ventana. prompt(mensaje,respuesta_por_defecto). Muestra un cuadro de dilogo que contiene una caja de texto en la cual podremos escribir una respuesta a lo que nos pregunte en 'mensaje'. El parmetro 'respuesta_por_defecto' es opcional, y mostrar la respuesta por defecto indicada al abrirse el cuadro de dilogo. El mtodo retorna una cadena de caracteres con la respuesta introducida. scroll(x,y). Desplaza el objeto window actual a las coordenadas especificadas por (x,y). A partir de NS3, IE4. scrollBy(x,y). Desplaza el objeto window actual el nmero de pixels especificado por (x,y). A partir de NS4. scrollTo(x,y). Desplaza el objeto window actual a las coordenadas especificadas por (x,y). A partir de NS4. setInterval(expresion,tiempo). Evalua la expresin especificada despus de que hayan pasado el nmero de milisegundos especificados en tiempo. Devuelve un valor que puede ser usado como identificativo por clearInterval(). A partir de NS4, IE4. setTimeout(expresion,tiempo). Evalua la expresin especificada despus de que hayan pasado el nmero de milisegundos especificados en tiempo. Devuelve un valor que puede ser usado como identificativo por clearTimeout(). A partir de NS4, IE4.
Me dejo en el tintero otras propiedades y mtodos como innerHeight, innerWidth, outerHeight, outerWidth, pageXOffset, pageYOffset, personalbar, scrollbars, back(), find(["cadena"],[caso,bkwd]), forward(), home(), print(), stop()... todas ellas disponibles a partir de NS 4 y cuya explicacin remito como ejercicio al lector interesado en saber ms sobre el objeto window.
18
i++; if (i<20) setTimeout('moverVentana()',100); else mi_ventana.close(); } //--> </script> </HEAD> <BODY> <script LANGUAGE="JavaScript"> <!-var opciones="left=100,top=100,width=250,height=150", i= 0; mi_ventana = window.open("","",opciones); mi_ventana.document.write("Una prueba de abrir ventanas"); mi_ventana.moveTo(400,100); moverVentana(); //--> </script> </BODY> </HTML>
El objeto frame
Todos sabemos que la ventana del navegador puede ser dividida en varios frames que contengan cada uno de ellos un documento en el que mostrar contenidos diferentes. Al igual que con las ventanas, cada uno de estos frames puede ser nombrado y referenciado, lo que nos permite cargar documentos en un marco sin que esto afecte al resto. Realmente cada frame se representa con un objeto window, esto quiere decir que el objeto frame tiene todas las propiedades y mtodos del objeto window.
19
Mtodos alert(mensaje). Muestra el mensaje 'mensaje' en un cuadro de dilogo blur(). Elimina el foco del objeto window actual. A partir de NS 3, IE 4. clearInterval(id). Elimina el intervalo referenciado por 'id' (ver el mtodo
setInterval(), tambin del objeto window). A partir de NS 4, IE 4. clearTimeout(nombre). Cancela el intervalo referenciado por 'nombre' (ver el mtodo setTimeout(), tambin del objeto window). confirm(mensaje). Muestra un cuadro de dilogo con el mensaje 'mensaje' y dos botones, uno de aceptar y otro de cancelar. Devuelve true si se pulsa aceptar y devuelve false si se pulsa cancelar. focus(). Captura el foco del ratn sobre el objeto window actual. A partir de NS 3, IE 4. open(URL,nombre,caracteristicas). Abre la URL que le pasemos como primer parmetro en una ventana de nombre 'nombre'. Si esta ventana no existe, abrir una ventana nueva en la que mostrar el contenido con las caractersticas especificadas. Las caractersticas que podemos elegir para la ventana que queramos abrir son las siguientes: prompt(mensaje,respuesta_por_defecto). Muestra un cuadro de dilogo que contiene una caja de texto en la cual podremos escribir una respuesta a lo que nos pregunte en 'mensaje'. El parmetro 'respuesta_por_defecto' es opcional, y mostrar la respuesta por defecto indicada al abrirse el cuadro de dilogo. El mtodo retorna una cadena de caracteres con la respuesta introducida. scroll(x,y). Desplaza el objeto window actual a las coordenadas especificadas por (x,y). A partir de NS3, IE4. scrollBy(x,y). Desplaza el objeto window actual el nmero de pixels especificado por (x,y). A partir de NS4. scrollTo(x,y). Desplaza el objeto window actual a las coordenadas especificadas por (x,y). A partir de NS4. setInterval(expresion,tiempo). Evalua la expresin especificada despus de que hayan pasado el nmero de milisegundos especificados en tiempo. Devuelve un valor que puede ser usado como identificativo por clearInterval(). A partir de NS4, IE4. setTimeout(expresion,tiempo). Evalua la expresin especificada despus de que hayan pasado el nmero de milisegundos especificados en tiempo. Devuelve un valor que puede ser usado como identificativo por clearTimeout(). A partir de NS4, IE4.
En este ejemplo mostramos como acceder a los frames y cmo se pueden cambiar propiedades de un frame en otro.
<HTML> <HEAD> <title>Ejemplo de JavaScript</title> </HEAD> <frameset cols="50%,*"> <frame name="izq" src="ejem09a.html" scrolling="auto"> <frameset rows="50%,*"> <frame name="der1" src="ejem09b.html" crolling="auto"> <frame name="der2" src="ejem09b.html" scrolling="auto"> </frameset> </frameset> </HTML>
20
<script LANGUAGE="JavaScript"> <!-function color() { top.frames['der1'].document.bgColor="#FF5500"; } function cargarYahoo() { top.frames['der2'].location='http://www.yahoo.com'; } //--> </script> </HEAD> <BODY> <script LANGUAGE="JavaScript"> <!-var i=0; document.write('<h1>Soy el frame: ' + window.name + "</h1><br>"); for (i=0;i<top.frames.length;i++) document.write('Nombre del frame ' + i + ': ' + top.frames[i].name + "<br>"); //--> </script> <br><br> <a href="javascript:color()">Cambia el color del frame <b>der1</b></a><br><br><br> <a href="javascript:cargarYahoo()">Cargar Yahoo!! en el frame <b>der2</b></a><br> </BODY> </HTML>
<HTML> <HEAD> <title>Ejemplo de JavaScript</title> </HEAD> <BODY> <script LANGUAGE="JavaScript"> <!-document.write('<h1>Soy el frame: ' + window.name + "</h1><br>"); //--> </script> </BODY> </HTML>
El objeto location
Este objeto contiene la URL actual as como algunos datos de inters respecto a esta URL. Su finalidad principal es, por una parte, modificar el objeto location para cambiar a una nueva URL, y extraer los componentes de dicha URL de forma separada para poder trabajar con ellos de forma individual si es el caso. Recordemos que la sintaxis de una URL era:
protocolo://maquina_host[:puerto]/camino_al_recurso Propiedades hash. Cadena que contiene el nombre del enlace, dentro de la URL. host. Cadena que contiene el nombre del servidor y el nmero del puerto, dentro de
la URL.
21
port. Cadena que contiene el nmero de puerto del servidor, dentro de la URL. protocol. Cadena que contiene el protocolo utilizado (incluyendo los dos puntos),
dentro de la URL. search. Cadena que contiene la informacin pasada en una llamada a un script, dentro de la URL.
Mtodos reload(). Vuelve a cargar la URL especificada en la propiedad href del objeto
location.
<HTML> <HEAD> <title>Ejemplo de JavaScript</title> </HEAD> <BODY> <script LANGUAGE="JavaScript"> <!-document.write("Location document.write("Location document.write("Location document.write("Location document.write("Location document.write("Location //--> </script> </BODY> </HTML> <b>href</b>: " + <b>host</b>: " + <b>hostname</b>: <b>pathname</b>: <b>port</b>: " + <b>protocol</b>: location.href + "<br>"); location.host + "<br>"); " + location.hostname + "<br>"); " + location.pathname + "<br>"); location.port + "<br>"); " + location.protocol + "<br>");
El objeto history
Este objeto se encarga de almacenar una lista con los sitios por los que se ha estado navegando, es decir, guarda las referencias de los lugares visitados. Se utiliza, sobre todo, para movernos hacia delante o hacia atrs en dicha lista.
Propiedades current. Cadena que contiene la URL completa de la entrada actual en el historial. next. Cadena que contiene la URL completa de la siguiente entrada en el historial. length. Entero que contiene el nmero de entradas del historial (i.e., cuntas
direcciones han sido visitadas). previous. Cadena que contiene la URL completa de la anterior entrada en el historial.
Mtodos back(). Vuelve a cargar la URL del documento anterior dentro del historial. forward(). Vuelve a cargar la URL del documento siguiente dentro del historial. go(posicion). Vuelve a cargar la URL del documento especificado por posiciondentro del historial. posicion puede ser un entero, en cuyo caso
22
indica la posicin relativa del documento dentro del historial; o puede ser una cadena de caracteres, en cuyo caso representa toda o parte de una URL que est en el historial.
El objeto navigator
Este objeto simplemente nos da informacin relativa al navegador que est utilizando el usuario.
Propiedades appCodeName. Cadena que contiene el nombre del cdigo del cliente. appName. Cadena que contiene el nombre del cliente. appVersion. Cadena que contiene informacin sobre la versin del cliente. language. Cadena de dos caracteres que contiene informacin sobre el idioma de la
versin del cliente. mimeTypes. Array que contiene todos los tipos MIME soportados por el cliente. A partir de NS 3. platform. Cadena con la plataforma sobre la que se est ejecutando el programa cliente. plugins. Array que contiene todos los plug-ins soportados por el cliente. A partir de NS 3. userAgent. Cadena que contiene la cabecera completa del agente enviada en una peticin HTTP. Contiene la informacin de las propiedades appCodeName y appVersion.
Mtodos javaEnabled(). Devuelve true si el cliente permite la utilizacin de Java, en caso contrario, devuelve false.
<HTML> <HEAD> <title>Ejemplo de JavaScript</title> </HEAD> <BODY> <script LANGUAGE="JavaScript"> <!-document.write("Navigator <b>appCodeName</b>: " + navigator.appCodeName + "<br>"); document.write("Navigator <b>appName</b>: " + navigator.appName + "<br>"); document.write("Navigator <b>appVersion</b>: " + navigator.appVersion + "<br>"); document.write("Navigator <b>language</b>: " + navigator.language + "<br>"); document.write("Navigator <b>platform</b>: " + navigator.platform + "<br>"); document.write("Navigator <b>userAgent</b>: " + navigator.userAgent + "<br>"); //--> </script> </BODY> </HTML>
El objeto document
El objeto document es el que tiene el contenido de toda la pgina que se est visualizando. Esto incluye el texto, imgenes, enlaces, formularios, ... Gracias a este objeto
23
vamos a poder aadir dinmicamente contenido a la pgina, o hacer cambios, segn nos convenga.
Propiedades alinkColor. Esta propiedad tiene almacenado el color de los enlaces activos anchors. Se trata de un array con los enlaces internos existentes en el documento applets. Es un array con los applets existentes en el documento bgColor. Propiedad que almacena el color de fondo del documento cookie. Es una cadena con los valores de las cookies del documento actual domain. Guarda el nombre del servidor que ha servido el documento embeds. Es un array con todos los EMBED del documento fgColor. En esta propiedad tenemos el color del primer plano forms. Se trata de un array con todos los formularios del documento. Los
formularios tienen a su vez elementos (cajas de texto, botones, etc) que tienen sus propias propiedades y mtodos, y sern tratados en el siguiente captulo. images. Array con todas las imgenes del documento lastModified. Es una cadena con la fecha de la ltima modificacin del documento linkColor. Propiedad que almacena el color de los enlaces links. Es un array con los enlaces externos location. Cadena con la URL del documento actual referrer. Cadena con la URL del documento que llam al actual, en caso de usar un enlace. title. Cadena con el ttulo del documento actual vlinkColor. Propiedad en la que se guarda el color de los enlaces visitados
Mtodos clear(). Limpia la ventana del documento open(). Abre la escritura sobre un documento. close(). Cierra la escritura sobre el documento actual write(). Escribe texto en el documento. writeln(). Escribe texto en el documento, y adems lo finaliza con un salto de
lnea
<HTML> <HEAD> <title>Ejemplo de JavaScript</title> <script LANGUAGE="JavaScript"> <!-var i=1; var titulooriginal = document.title; function cambiarTitulo() { document.title = titulooriginal.substring(0,i); i++; if (i>titulooriginal.length) i=0; setTimeout('cambiarTitulo()',100); } cambiarTitulo(); //--> </script> </HEAD> <BODY> <script LANGUAGE="JavaScript"> <!-document.write("Navigator <b>alinkColor </b>: " + document.alinkColor + "<br>"); document.write("Navigator <b>lastModified</b>: " +document.lastModified + "<br>");
24
document.write("Document <b>bgColor</b>: " + document.bgColor + "<br>"); document.write("Document <b>fgColor</b>: " + document.fgColor + "<br>"); document.write("Document <b>referrer</b>: " + document.referrer + "<br>"); //--> </script> </BODY> </HTML>
El objeto link
Este objeto engloba todas las propiedades que tienen los enlaces externos al documento actual.
Propiedades target. Es una cadena que tiene el nombre de la ventana o del frame especificado
en el parmetro TARGET hash. Es una cadena con el nombre del enlace, dentro de la URL host. Es una cadena con el nombre del servidor y nmero de puerto, dentro de la URL hostname. Es una cadena con el nombre de dominio del servidor (o la direccin IP) dentro de la URL href. Es una cadena con la URL completa pathname. Es una cadena con el camino al recurso, dentro de la URL port. Es una cadena con el nmero de puerto, dentro de la URL protocol. Es una cadena con el protocolo usado, incluyendo los : (los dos puntos), dentro de la URL search. Es una cadena que tiene la informacin pasada en una llamada a un script, dentro de la URL
<HTML> <HEAD> <title>Ejemplo de JavaScript</title> </HEAD> <BODY> <a href="http://www.yahoo.com" target="_blank">Yahoo!!</a><br><br> <a href="http://www.google.com/search?q=crear+paginas+web">Google!</a><br><br> <script LANGUAGE="JavaScript"> <!-var i; for (i=0;i<document.links.length;i++) { document.write("Target : " + document.links[i].target + "<br>"); document.write("Host : " + document.links[i].host + "<br>"); document.write("Href : " + document.links[i].href + "<br>"); document.write("Search : " + document.links[i].search + "<br>"); document.write("<br><br>"); } //--> </script> </BODY> </HTML>
25
El objeto anchor
Este objeto engloba todas las propiedades que tienen los enlaces internos al documento actual.
Propiedades name. Nombre del ancla. target. Es una cadena que tiene el nombre de la ventana o del frame especificado
en el parmetro TARGET
<HTML> <HEAD> <title>Ejemplo de JavaScript</title> </HEAD> <BODY> <a name="arriba" target="_top">Inicio</a><br><br> <script LANGUAGE="JavaScript"> <!-var i; for (i=0;i<document.anchors.length;i++) { document.write("Name : " + document.anchors[i].name + "<br>"); document.write("Target : " + document.anchors[i].target + "<br>"); document.write("<br><br>"); } //--> </script> <a href="#arriba">Subir</a> </BODY> </HTML>
El objeto image
Gracias a este objeto (disponible a partir de la versin 3 de Netscape, aunque Microsoft lo adopt en la versin 4 de su navegador) vamos a poder manipular las imgenes del documento, pudiendo conseguir efectos como el conocido rollover (cambio de imgenes al pasar el ratn sobre la imagen).
Propiedades border. Contiene el valor del parmetro 'border' de la imagen. complete. Es un valor booleano que nos dice si la imagen se ha descargado
completamente o no. height. Contiene el valor del parmetro 'height' de la imagen. hspace. Contiene el valor del parmetro 'hspace' de la imagen. lowsrc. Contiene el valor del parmetro 'lowsrc' de la imagen. name. Contiene el valor del parmetro 'name' de la imagen. src. Contiene el valor del parmetro 'src' de la imagen. vspace. Contiene el valor del parmetro 'vspace' de la imagen. width. Contiene el valor del parmetro 'width' de la imagen.
26
<HTML> <HEAD> <title>Ejemplo de JavaScript</title> </HEAD> <script LANGUAGE="JavaScript"> <!-img1 = new Image(); img1.src = "/graficos/nni1b.gif"; img2 = new Image(); img2.src = "/graficos/nni1a.gif"; function cambia(nombre,imagen) { nombre.src = imagen.src } function dobleancho() { imagen1.width=imagen1.width*2; } function doblealto() { imagen1.height=imagen1.height*2; } function mitadancho() { imagen1.width=imagen1.width/2; } function mitadalto() { imagen1.height=imagen1.height/2; } //--> </script> <BODY> <a href="" onmouseover="cambia(imagen1,img1)" onmouseout="cambia(imagen1,img2)"><img src="/graficos/nni1a.gif" width="68" height="68" border="0" name="imagen1"></a><br><br> <a href="javascript:dobleancho()">Doble ancho</a><br> <a href="javascript:doblealto()">Doble Alto</a><br> <a href="javascript:mitadancho()">Mitad ancho</a><br> <a href="javascript:mitadalto()">Mitad Alto</a><br> </BODY> </HTML>
Formularios
En este captulo finalizamos el estudio de los objetos del navegador viendo cmo manipular formularios. Este punto es especialmente importante: si aprendemos correctamente a manipular todos los objetos de un formulario, podremos hacer funciones que nos permitan validarlo antes de enviar estos datos a un servidor, ahorrndole la faena de tener que verificar la correccin de los datos enviados.
El objeto form
Este objeto es el contenedor de todos los elementos del formulario. Como ya vimos al tratar el objeto document, los formularios se agrupan en un array dentro de document. Cada elemento de este array es un objeto de tipo form.
27
Propiedades action. Es una cadena que contiene la URL del parmetro ACTION del form, es
decir, la direccin en la que los datos del formulario sern procesados. elements. Es un array que contiene todos los elementos del formulario, en el mismo orden en el que se definen en el documento HTML. Por ejemplo, si en el formulario hemos puesto, en este orden, una caja de texto, un checkbox y una lista de seleccin, la caja de texto ser elements[0], el checkbox ser elements[1] y la lista de seleccin ser elements[2]. encoding. Es una cadena que tiene la codificacin mime especificada en el parmetro ENCTYPE del form. method. Es una cadena que tiene el nombre del mtodo con el que se va a recibir/procesar la informacin del formulario (GET/POST).
Mtodos reset(). Resetea el formulario: tiene el mismo efecto que si pulsramos un botn
de tipo RESET dispuesto en el form. submit(). Enva el formulario: tiene el mismo efecto que si pulsramos un botn de tipo SUBMIT dispuesto en el form.
Vistas ahora las propiedades y mtodos del objeto form, pasamos a estudiar, uno por uno, todos los objetos contenidos en el formulario.
Propiedades dafaultValue. Es una cadena que contiene el valor por defecto que se le ha dado a
uno de estos objetos por defecto. name. Es una cadena que contiene el valor del parmetro NAME. value. Es una cadena que contiene el valor del parmetro VALUE. maxlength. Nmero mximo de caracteres que puede contener el campo de texto.
Mtodos blur(). Pierde el foco del ratn sobre el objeto especificado. focus(). Obtiene el foco del ratn sobre el objeto especificado. select(). Selecciona el texto dentro del objeto dado.
<HTML> <HEAD> <title>Ejemplo de JavaScript</title> </HEAD> <script LANGUAGE="JavaScript"> <!-function Mostrar() { alert('Su nombre: ' + formulario.nombre.value);
28
alert('El password: ' + formulario.pass.value); } //--> </script> <BODY> <form action="procesa.phtml" name="formulario" id="formulario" method="GET"> Nombre: <input type="text" name="nombre" value="Tu nombre" maxlength="15"><br> Password: <input type="password" name="pass" maxlength="10"><br> </form> <a href="javascript:Mostrar();">Mostrar datos</a><br> </BODY> </HTML>
El objeto button
Tenemos tres tipos de botones: un botn genrico, 'button', que no tiene accin asignada, y dos botones especficos, 'submit' y 'reset'. Estos dos ltimos s que tienen una accin asignada al ser pulsados: el primero enva el formulario y el segundo limpia los valores del formulario.
Propiedades name. Es una cadena que contiene el valor del parmetro NAME. value. Es una cadena que contiene el valor del parmetro VALUE.
<HTML> <HEAD> <title>Ejemplo de JavaScript</title> </HEAD> <script LANGUAGE="JavaScript"> <!-function Mostrar(boton) { alert('Ha hecho click sobre el boton: ' + boton.name+', de valor:'+boton.value); return true; } //--> </script> <BODY> <form action="procesa.phtml" name="formulario" id="formulario" method="GET"> Un boton: <input type="button" name="Boton1" value="El boton 1" OnClick="Mostrar(this);"><br><br> Un boton: <input type="button" name="Boton2" value="El boton 2" OnClick="Mostrar(this);"><br><br> Un boton: <input type="button" name="Boton3" value="El boton 3" OnClick="Mostrar(this);"><br> </form> </BODY> </HTML>
29
El objeto checkbox
Las "checkboxes" nos permiten seleccionar varias opciones marcando el cuadrito que aparece a su izquierda. El cuadrito pulsado equivale a un "s" y sin pulsar a un "no" o, lo que es lo mismo, a "true" o "false".
Propiedades
checked. Valor booleano que nos dice si el checkbox est pulsado o no defaultChecked. Valor booleano que nos dice si el checkbox debe estar
seleccionado por defecto o no name. Es una cadena que contiene el valor del parmetro NAME. value. Es una cadena que contiene el valor del parmetro VALUE.
Mtodos
click(). Realiza la accin de pulsado del botn
<HTML> <HEAD> <title>Ejemplo de JavaScript</title> </HEAD> <script LANGUAGE="JavaScript"> <!-function Mostrar(boton) { msg="Opcion 1:"+formulario.check1.checked+"\n" msg+="Opcion 2:"+formulario.check2.checked+"\n" msg+="Opcion 3:"+formulario.check3.checked+"\n" alert(msg); } //--> </script> <BODY> <form action="procesa.phtml" name="formulario" id="formulario" method="GET"> <input type="checkbox" name="check1" checked> Opcion 1<br> <input type="checkbox" name="check2"> Opcion 2<br> <input type="checkbox" name="check3" checked> Opcion 3<br> </form> <A href="javascript:Mostrar()">Ver valores</A> </BODY> </HTML>
El objeto radio
Al contrario que con los checkbox, que nos permiten elegir varias posibilidades entre las dadas, los objetos radio slo nos permiten elegir una de entre todas las que hay. Estn pensados para posibilidades mtuamente excluyentes (no se puede ser a la vez mayor de 18 aos y menor de 18 aos, no se puede estar a la vez soltero y casado, etc.).
30
Propiedades checked. Valor booleano que nos dice si el radio est seleccionado o no. defaultChecked. Valor booleano que nos dice si el radio debe estar seleccionado
por defecto o no. length. Valor numrico que nos dice el nmero de opciones dentro de un grupo de elementos radio. name. Es una cadena que contiene el valor del parmetro NAME. value. Es una cadena que contiene el valor del parmetro VALUE.
Hay que recordar que para agrupar elementos de tipo radio, todos ellos deben tener elmismo valor en NAME.
<HTML> <HEAD> <title>Ejemplo de JavaScript</title> </HEAD> <script LANGUAGE="JavaScript"> <!-function Mostrar(boton) { msg="Elementos:"+formulario.edad.length+"\n"; msg+="Menor de 18 aos:"+formulario.edad[0].checked+"\n"; msg+="Entre 18 y 60 aos:"+formulario.edad[1].checked+"\n"; msg+="Mayor de 60 aos:"+formulario.edad[2].checked+"\n"; alert(msg); } //--> </script> <BODY> <form action="procesa.phtml" name="formulario" id="formulario" method="GET"> Edad:<br> <input type="radio" name="edad" value="<18"> Menor de 18 aos.<br> <input type="radio" name="edad" value=">18 y <60" checked> Entre 18 y 60 aos.<br> <input type="radio" name="edad" value=">60"> Mayor de 60 aos.<br> </form> <A href="javascript:Mostrar()">Ver valores</A> </BODY> </HTML>
El objeto select
Este objeto representa una lista de opciones dentro de un formulario. Puede tratarse de una lista desplegable de la que podremos escoger alguna (o algunas) de sus opciones.
Propiedades
del objeto select
length. Valor numrico que nos indica cuntas opciones tiene la lista name. Es una cadena que contiene el valor del parmetro NAME
31
options. Se trata de un array que contiene cada una de las opciones de la lista.
Este array tiene, a su vez, las siguientes propiedades: o defaultSelected. Valor booleano que nos indica si la opcin est seleccionada por defecto. o index. Valor numrico que nos da la posicin de la opcin dentro de la lista. o length. Valor numrico que nos dice cuntas opciones tiene la lista. o options. Cadena con todo el cdigo HTML de la lista. o selected. Valor booleano que nos dice si la opcin est actualmente seleccionada o no. o text. Cadena con el texto mostrado en la lista de una opcin concreta. o value. Es una cadena que contiene el valor del parmetro VALUE de la opcin concreta de la lista. selectedIndex. Valor numrico que nos dice cul de todas las opciones disponibles est actualmente seleccionada.
<HTML> <HEAD> <title>Ejemplo de JavaScript</title> </HEAD> <script LANGUAGE="JavaScript"> <!-function Mostrar(boton) { msg="Elementos:"+formulario.edad.length+"\n"; msg+="Edad: "+formulario.edad.options[formulario.edad.selectedIndex].value+"\n"; alert(msg); } //--> </script> <BODY> <form action="procesa.phtml" name="formulario" id="formulario" method="GET"> Edad:<br> <select name="edad"> <option value="<18" SELECTED>Menor de 18 aos</option> <option value=">18 y <60">Entre 18 y 60 aos</option> <option value=">60">Mayor de 60 aos</option> </select> </form> <A href="javascript:Mostrar()">Ver valores</A> </BODY> </HTML>
El objeto hidden
Gracias a este objeto podemos almacenar informacin extra en el formulario de forma completamente transparente para el usuario, pues no se ver en ningn momento que tenemos estos campos en el documento. Es parecido a un campo de texto (objeto text) salvo que no tiene valor por defecto (no tiene sentido pues el usuario no va a modificarlo) y que no se puede editar.
Propiedades name. Es una cadena que contiene el valor del parmetro NAME. value. Es una cadena que contiene el valor del parmetro VALUE.
32