Java Script Bsico

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.

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.
<script language="JavaScript" src ="archivo.js"> </script>

Cech- Java Script

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:

<input type="submit" onclick="alert('Acabas false;" value="Click">

Click

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.

Cech- Java Script

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;

Ejemplos de definiciones correctas:

var _Una_Variable, P123robando, _123, mi_carrooo;

Por supuesto, podemos inicializar una variable al declararla:

var Una_Variable="Esta Cadenita de texto";

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

Cech- Java Script

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

Obj = new Object();

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.

Cech- Java Script

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

Suma dos nmeros

Substraccin

Resta dos nmeros

Multiplicacin

Multiplica dos nmeros

Divisin

Divide dos nmeros

Mdulo: el resto despus de la divisin

7 % 2

Devuelve el resto de dividir ambos nmeros, en este ejemplo el resultado es 1

++

Incremento.

a++ a--

Suma 1 al contenido de una variable.

--

Decremento.

Resta 1 al contenido de una variable.

Invierte el signo de un operando.

-a

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

Cech- Java Script

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

==

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

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.

Cech- Java Script

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

&&

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

Cech- Java 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;

+= (tambien - =, * =, / =)

Aade el valor del operando de la derecha a la variable de la izquierda. 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>

Cech- Java Script

Operadores especiales
Varios operadores de JavaScript, es difcil clasificarlos en una categora en particular. Estos operadores se resumen a continuacin. Operador Descripcin

(condicin) ? trueVal : falseVal

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

El operador new crea una instancia de un objeto.

This

La palabra clave 'this' se refiere al objeto actual.

El operador ',' evala los dos operados.

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

Devuelve el tipo de dato de un operando.

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.

Cech- Java Script

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.

<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>");

Cech- Java Script

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:

Cech- Java Script

11

a=new Array("cadena"); a=new Array(false);

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

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.

<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>");

Cech- Java Script

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.

Cech- Java Script

13

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

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.

Cech- Java Script

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)

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.

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

Cech- Java Script

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

Cech- Java Script

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.

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

Cech- Java Script

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.

<HTML> <HEAD> <title>Ejemplo de JavaScript</title> <script LANGUAGE="JavaScript"> <!-function moverVentana() { mi_ventana.moveBy(5,5);

Cech- Java Script

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.

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.

Cech- Java Script

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>

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

Cech- Java Script

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.

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.

Cech- Java Script

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.

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

Cech- Java Script

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

Cech- Java Script

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>");

Cech- Java Script

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>

Cech- Java Script

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.

Cech- Java Script

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.

Cech- Java Script

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.

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

Cech- Java Script

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.

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>

Cech- Java Script

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

Cech- Java Script

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.

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

Cech- Java Script

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.

Cech- Java Script

32