You are on page 1of 28

JAVASCRIPT

QU ES JAVASCRIPT?
JavaScript -JS- es un eficiente lenguaje de guionizacin desarrollado por la empresa Netscape para el desarrollo de cliente-servidor de Web. Si bien en mucho menos riguroso que Java, no hay duda que JavaScript es un lenguaje completo basado en objetos. JavaScript trabaja de la manera siguiente: en el lado del cliente, el navegador interpreta los comandos de JavaScript que estn embebidos directamente en la pgina de HTML. Lo anterior significa que un guin de JavaScript puede ser ejecutado directamente en la computadora cliente sin necesidad de conectarse de nuevo al servidor (caso contrario a lo que se hace con PHP). Al cambiar la tarea de ejecutar guiones del servidor al cliente, el proceso de aadir interactividad a la pgina se vuelve ms rpido y eficiente.

JavaScript es un lenguaje interpretado. A diferencia de los lenguajes compilados que crean cdigo binario, los lenguajes interpretados se ejecutan "en e instante, comando por comando". Lo anterior implica que JavaScript es per se ms simple que Java para tareas de control de pginas de HTML.

PRIMER JAVASCRIPT
DNDE Y CMO INCLUIR JAVASCRIPT
Existen distintos modos de incluir lenguaje JavaScript en una pgina. La forma mas frecuente de hacerlo es utilizando la directiva <script> en un documento HTML (se pueden incluir tantas directivas <script> como se quiera en un documento). El formato es el siguiente:
<script language="Javascript 1.3">

El atributo lenguaje hace referencia a la versin de JavaScript que se va a utilizar en dicho script. Otro atributo de la directiva script es src, que puede usarse para incluir un archivo externo que contiene JavaScript y que quiere incluirse en el cdigo HTML. El archivo externo simplemente es un archivo del texto que contiene cdigo JavaScript, y cuyo nombre acaba con la extensin js.
<script language="JavaScript" src ="archivo.js"> </script>

Puede incluirse tambin cdigo JavaScript como respuesta a algn evento:


<input type="submit" onclick="alert('Acabas de hacer click');return false;" value="Click">

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>

VARIABLES
Las variables almacenan y recuperan datos, tambin conocidos como "valores". 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). 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 est codificando dentro de una funcin y quiere crear una variable local que slo tenga alcance dentro de esa funcin, debe declarar la nueva variable haciendo uso de var. Ejemplos de definiciones errneas:
var Mi Variable, 123Probando, $Variable, for, while;

Ejemplos de definiciones correctas:

var _Una_Variable, P123robando, _123, mi_carrooo; var Una_Variable="Esta Cadenita de texto";

Por supuesto, podemos inicializar una variable al declararla: Ejemplo de declaracin de variables locales y globales:
function newFunction() { var localVariable=1; globalVariable=0; }

TIPOS DE DATOS
Javascript reconoce seis tipos de valores diferentes: numricos, lgicos, objetos, cadenas, nulos e indefinidos. Aunque es 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";

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 Boleanos Cadenas Objetos Nulos Enteros o coma flotante. True o False. Los tipos de datos cadena deben ir delimitados por comillas simples o dobles. Obj = new Object(); 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
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: Oper. + * / % ++ -Nombre Suma Substraccin Multiplicacin Divisin Mdulo Incremento. Decremento. Invertir signo. Ejemplo 5+6 7-9 6*3 4/8 7%2 a++ a--a Descripcin Suma dos nmeros Resta dos nmeros Multiplica dos nmeros Divide dos nmeros Devuelve el resto -modulo- de dividir ambos nmeros. Suma 1 al contenido de una variable. Resta 1 al contenido de una variable. Invierte el signo de un operando.

<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 RELACIONALES
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 " Igual a" devuelve true si los operandos son iguales Estrictamente "igual a" (JavaScript 1.3) " No igual a" devuelve true si los operandos no son iguales Estrictamente " No igual a" (JavaScript 1.3) " 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.

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

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.

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 " Y " Devuelve true si ambos operadores son true. " O " Devuelve true si uno de los operadores es true. "No" Devuelve true si la negacin del operando es true.

<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 Asigna el valor del operando de la derecha a la variable de la izquierda. Ejemplo: inttotal=100;

+= Aade el valor del operando de la derecha a la variable de la izquierda. (tambien - =, * =, / =) Ejemplo: inttotal +=100 &= (tambin |=) Asigna el resultado de (operando de la izquierda & operando de la derecha) al operando de la izquierda

<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
(condicin) ? trueVal : falseVal New This ,

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. El operador new crea una instancia de un objeto. La palabra clave 'this' se refiere al objeto actual. El operador ',' evala los dos operados.

Delete Void Typeof

El operador delete borra un objeto, una propiedad de un objeto, o un elemento especificado de un vector. El operador Void especifica una expresin que ser evaluada sin devolver ningn valor. Devuelve el tipo de dato de un operando.

OBJETOS LENGUAJE
OBJETOS
Una primera clasificacin del modelo de objetos lo dividira en dos grandes grupos. Por una parte, tendramos los objetos directamente relacionados con el navegador y las posibilidades de programacin HTML (denominados, genricamente, objetos del navegador) y por otra parte un conjunto de objetos relacionados con la estructura del lenguaje, llamados genricamente objetos del lenguaje. 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.

Mtodos:

anchor(nombre). Crea un enlace asignando al atributo NAME el valor de 'nombre'. Este nombre debe estar entre comillas " " big(). Muestra la cadena de caracteres con una fuente grande. blink(). Muestra la cadena de texto con un efecto intermitente. charAt(indice). Devuelve el carcter situado en la posicin especificada por 'indice'. fixed(). Muestra la cadena de caracteres con una fuente proporcional. fontcolor(color). Cambia el color con el que se muestra la cadena. La variable color debe ser especificada entre comillas: " ", o bien siguiendo el estilo de HTML, es decir "#RRGGBB" donde RR, GG, BB son los valores en hexadecimal para los colores rojo, verde y azul, o bien puede ponerse un identificador vlido de color entre comillas. Algunos de estos identificadores son "red", "blue", "yellow", "purple", "darkgray", "olive", "salmon", "black", "white", ... fontsize(tamao). Cambia el tamao con el que se muestra la cadena. Los tamaos vlidos son de 1 (ms pequeo) a 7 (ms grande). indexOf(cadena_buscada,indice) Devuelve la posicin de la primera ocurrencia de 'cadena_buscada' dentro de la cadena actual, a partir de la posicin dada por 'indice'. Este ltimo argumento es opcional y, si se omite, la busqueda comienza por el primer carcter de la cadena. italics(). Muestra la cadena en cursiva. lastIndexOf(cadena_buscada,indice). Devuelve la posicin de la ltima ocurrencia de 'cadena_buscada' dentro de la cadena actual, a partir de la posicin dada por 'indice', y buscando hacia atrs. Este ltimo argumento es opcional y, si se omite, la busqueda comienza por el ltimo carcter de la cadena. link(URL) . Convierte la cadena en un vnculo asignando al atributo HREF el valor de URL. small(). Muestra la cadena con una fuente pequea.

split(separador). Parte la cadena en un array de caracteres. Si el carcter separador no se encuentra, devuelve un array con un slo elemento que coincide con la cadena original. A partir de NS 3, IE 4 (JS 1.2). strike(). Muestra la cadena de caracteres tachada. sub(). Muestra la cadena con formato de subndice. substring(primer_Indice,segundo_Indice). Devuelve la subcadena que comienza en la posicin 'primer_Indice + 1' y que finaliza en la posicin 'segundo_Indice'. Si 'primer_Indice' es mayor que 'segundo_Indice', empieza por 'segundo_Indice + 1' y termina en 'primer_Indice'. Si hacemos las cuentas a partir de 0, entonces es la cadena que comienza en 'primer_Indice' y termina en 'segundo_Indice - 1' (o bien 'segundo_Indice' y 'primer_Indice - 1' si el primero es mayor que el segundo). sup(). Muestra la cadena con formato de superndice. toLowerCase() . Devuelve la cadena en minsculas. toUpperCase(). Devuelve la cadena en minsculas.
Ejemplo 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>"); 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 entre 0 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:
a=new Array("cadena"); a=new Array(false);

Inicializan el array a, en el primer caso, con un elemento cuyo contenido es la cadena cadena, 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);

y para referenciar al elemento que ocupa la posicin (i,j), escribiremos a[i][j]; 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.

Mtodos:

join(separador). Une los elementos de las cadenas de caracteres de cada elemento de un array en un string, separando cada cadena por el separador especificado. reverse(). Invierte el orden de los elementos del array. sort(). Ordena los elementos del array siguiendo el orden lexicogrfico.

Ejemplo Array
<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>"); 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. tan(numero). Devuelve la tangente de 'numero' (que debe estar en radianes) o NaN.

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 cralo 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. getTime(). Devuelve el tiempo transcurrido en milisegundos desde el 1 de enero de 1970 hasta el momento actual. getYear(). Devuelve el ao actual como un entero. setDate(da_mes). Pone el da del mes actual en el objeto Date que estemos usando. setDay(da_semana). Pone el da de la semana actual en el objeto Date que estemos usando. setHours(horas). Pone la hora del da actual en el objeto Date que estemos usando. setMinutes(minutos). Pone los minutos de la hora actual en el objeto Date que estemos usando. setMonth(mes). Pone el mes del ao actual en el objeto Date que estemos usando. setSeconds(segundos). Pone los segundos del minuto actual en el objeto Date que estemos usando. setTime(milisegundos). Pone la fecha que dista los milisegundos que le pasemos del 1 de enero de 1970 en el objeto Date que estemos usando. setYear(ao). Pone el ao actual en el objeto Date que estemos usando. toGMTString(). Devuelve una cadena que usa las convenciones de Internet con la zona horaria GMT.

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) Para consultar estos valores, no podemos hacer: a = new Number(); alert(a.MAX_VALUE); 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.

OBJETOS NAVEGADOR
JERARQUA
En esta parte del curso se describirn las propiedades y los mtodos de los objetos del navegador. Inicialmente hay que mencionar 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 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, documento es el nombre del objeto document, formulario es el nombre del objeto forms (veremos que forms es un array) y caja_de_texto es el nombre del objeto textarea.

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

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. Propiedades

closed. Vlida a partir de Netscape 3 en adelante y MSIE 4 en adelante. Es un booleano que nos dice si la ventana est cerrada ( closed = true ) o no ( closed = false ). defaultStatus. Cadena que contiene el texto por defecto que aparece en la barra de estado (status bar) del navegador. frames. Es un array: cada elemento de este array (frames[0], frames[1], ...) es uno de los frames que contiene la ventana. Su orden se asigna segn se definen en el documento HTML. history. Se trata de un array que representa las URLS visitadas por la ventana (estn almacenadas en su historial). length. Variable que nos indica cuntos frames tiene la ventana actual. location. Cadena con la URL de la barra de direccin. name. Contiene el nombre de la ventana, o del frame actual. opener. Es una referencia al objeto window que lo abri, si la ventana fue abierta usando el mtodo open() que veremos cuando estudiemos los mtodos. parent. Referencia al objeto window que contiene el frameset. self. Es un nombre alternativo del window actual. status. String con el mensaje que tiene la barra de estado. top. Nombre alternativo de la ventana del nivel superior. window. Igual que self: nombre alternativo del objeto window actual.

Mtodos

alert(mensaje). Muestra el mensaje 'mensaje' en un cuadro de dilogo blur(). Elimina el foco del objeto window actual. clearInterval(id). Elimina el intervalo referenciado por 'id' (ver el mtodo setInterval(), tambin del objeto window). 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. moveBy(x,y). Mueve el objeto window actual el nmero de pixels especificados por (x,y). moveTo(x,y). Mueve el objeto window actual a las coordenadas (x,y).

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: 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. o outerHeight = px. Nos dice el alto *total* de la ventana el pixels. 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). scrollBy(x,y). Desplaza el objeto window actual el nmero de pixels especificado por (x,y). scrollTo(x,y). Desplaza el objeto window actual a las coordenadas especificadas por (x,y). 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(). 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().

<HTML> <HEAD> <title>Ejemplo de JavaScript</title> <script LANGUAGE="JavaScript"> <!-function moverVentana() { mi_ventana.moveBy(5,5); 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 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. hostname. Cadena que contiene el nombre de dominio del servidor (o la direccin IP), dentro de la URL. href. Cadena que contiene la URL completa. pathname. Cadena que contiene el camino al recurso, dentro de la URL. 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. replace(cadenaURL). Reemplaza el historial actual mientras carga la URL especificada en cadenaURL.

<HTML> <HEAD> <title>Ejemplo de JavaScript</title> </HEAD> <BODY>

<script LANGUAGE="JavaScript"> <!-document.write("Location <b>href</b>: " + location.href + "<br>");

document.write("Location document.write("Location "<br>"); document.write("Location "<br>"); document.write("Location document.write("Location "<br>"); //--> </script>
</BODY> </HTML>

<b>host</b>: " + location.host + "<br>"); <b>hostname</b>: " + location.hostname + <b>pathname</b>: " + location.pathname + <b>port</b>: " + location.port + "<br>"); <b>protocol</b>: " + location.protocol +

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 posicion dentro del historial. posicion puede ser un entero, en cuyo caso 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 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>"); 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>

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>

FORMULARIOS
En esta seccin 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.

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. 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.

LOS OBJETOS TEXT, TEXTAREA Y PASSWORD


Estos objetos representan los campos de texto dentro de un formulario. Adems, el objeto password es exactamente igual que el text salvo en que no muestra los caracteres introducidos por el usuario, poniendo asteriscos (*) en su lugar. 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); 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.

Mtodos

click(). Realiza la accin de pulsado del botn

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

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.). 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 el mismo valor en NAME. Mtodos

click(). Realiza la accin de pulsado del botn.

<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

length. Valor numrico que nos indica cuntas opciones tiene la lista name. Es una cadena que contiene el valor del parmetro NAME 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.

selected. Valor booleano que nos dice si la opcin est actualmente seleccionada o no. text. Cadena con el texto mostrado en la lista de una opcin concreta. 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.
o o o

<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.

Se colocan en HTML con la etiqueta <INPUT type=hidden> y se rellenan de datos con su atributo value. Mas tarde podremos cambiar el dato que figura en el campo accediendo a la propiedad value del campo de texto:

document.miFormulario.CampoHidden.value = "nuevo texto"