‐74‐ UNIDAD III PROGRAMACION EN JAVASCRIPT 1. FUNDAMENTOS DE JAVASCRIPT El JavaScript permite crear aplicaciones específicamente orientadas a su funcionamiento en la red Internet. Usando JavaScript , se pueden crear páginas HTML dinámicas que procesen la entrada del usuario y que sean capaces de gestionar datos persistentes usando objetos especiales, archivos y bases de datos relacionales. Con JavaScript se pueden construir aplicaciones que varían desde la gestión de la información corporativa interna y su publicación en Intranets hasta la gestión masiva de transacciones de comercio electrónico. Aunque se trata de algo que se sale del alcance de este curso, es importante reseñar que JavaScript puede utilizar una tecnología propietaria de Netscape, denominada LiveConnect; con el propósito de que las aplicaciones JavaScript puedan tener acceso a aplicaciones basadas en objetos distribuidos CORBA y Java. En cualquier caso, es importante señalar que, pese a la similitud de nombres, JavaScript no es Java. 1.1 Javascript Las aplicaciones cliente y servidor en JavaScript comparten el mismo núcleo de lenguaje. Este núcleo se corresponde con ECMA-262, el lenguaje de scripts estándar de la Oficina de Estándares de la Unión Europea, con algunos añadidos extra. Aunque Javascript de cliente y de servidor comparten el mismo conjunto base de funciones y características; en algunos casos se utilizan de distinta forma. Los componentes de JavaScript son los siguientes: -Núcleo de JavaScript (Core JavaScript). -JavaScript para Cliente. -JavaScript para Servidor. JavaScript para cliente engloba el núcleo del lenguaje y algunos elementos adicionales como, por ejemplo, una serie de objetos predefinidos que sólo son relevantes para la ejecución de JavaScript en el contexto de un cliente Web. Así mismo, JavaScript para servidor incluye también el núcleo de lenguaje y los objetos predefinidos y funciones necesarias para el correcto funcionamiento en el marco de un servidor. El código JavaScript para cliente se integra directamente en páginas HTML y es interpretado, en su totalidad, por el cliente Web en tiempo de ejecución. Puesto que con frecuencia es necesario ofrecer el mayor rendimiento posible, las aplicaciones JavaScript desarrolladas para servidores se pueden compilar antes de instalarlas en dichos servidores.
Transcript
‐74‐
UNIDAD III
PROGRAMACION EN JAVASCRIPT
1. FUNDAMENTOS DE JAVASCRIPT
El JavaScript permite crear aplicaciones específicamente orientadas a su funcionamiento en la red Internet. Usando JavaScript , se pueden crear páginas HTML dinámicas que procesen la entrada del usuario y que sean capaces de gestionar datos persistentes usando objetos especiales, archivos y bases de datos relacionales.
Con JavaScript se pueden construir aplicaciones que varían desde la gestión de la información corporativa interna y su publicación en Intranets hasta la gestión masiva de transacciones de comercio electrónico.
Aunque se trata de algo que se sale del alcance de este curso, es importante reseñar que JavaScript puede utilizar una tecnología propietaria de Netscape, denominada LiveConnect; con el propósito de que las aplicaciones JavaScript puedan tener acceso a aplicaciones basadas en objetos distribuidos CORBA y Java.
En cualquier caso, es importante señalar que, pese a la similitud de nombres, JavaScript no es Java.
1.1 Javascript
Las aplicaciones cliente y servidor en JavaScript comparten el mismo núcleo de lenguaje. Este núcleo se corresponde con ECMA-262, el lenguaje de scripts estándar de la Oficina de Estándares de la Unión Europea, con algunos añadidos extra. Aunque Javascript de cliente y de servidor comparten el mismo conjunto base de funciones y características; en algunos casos se utilizan de distinta forma. Los componentes de JavaScript son los siguientes:
-Núcleo de JavaScript (Core JavaScript).
-JavaScript para Cliente.
-JavaScript para Servidor.
JavaScript para cliente engloba el núcleo del lenguaje y algunos elementos adicionales como, por ejemplo, una serie de objetos predefinidos que sólo son relevantes para la ejecución de JavaScript en el contexto de un cliente Web.
Así mismo, JavaScript para servidor incluye también el núcleo de lenguaje y los objetos predefinidos y funciones necesarias para el correcto funcionamiento en el marco de un servidor.
El código JavaScript para cliente se integra directamente en páginas HTML y es interpretado, en su totalidad, por el cliente Web en tiempo de ejecución.
Puesto que con frecuencia es necesario ofrecer el mayor rendimiento posible, las aplicaciones JavaScript desarrolladas para servidores se pueden compilar antes de instalarlas en dichos servidores.
‐75‐
1.2 Javascript para aplicaciones cliente Los clientes Web que soportan JavaScript, tales como el Netscape Navigator/Communicator (desde la versión 2.0) o el Microsoft Internet Explorer (desde la versión 3.0) pueden interpretar sentencias JavaScript colocadas en un documento HTML.
Cuando el cliente Web solicita una página de este tipo, el servidor envía por la red al cliente el contenido completo del documento; incluyendo todos los códigos HTML y las sentencias JavaScript que pudieran existir en éste.
El cliente lee entonces la página de forma secuencial, desde el principio hasta el final, representando visualmente los códigos HTML y ejecutando las sentencias JavaScript conforme avanza el proceso de lectura e interpretación.
Las sentencias JavaScript colocadas en una página Web pueden dar respuesta a eventos de usuario, tales como la pulsación de un botón del ratón (clic), la entrada de datos en un formulario y la navegación por una página.
Por ejemplo, se puede crear una función JavaScript que permita verificar que la información introducida por el usuario en un campo de entrada de datos de un formulario (número de teléfono, código postal, número de tarjeta de crédito, etc.) tienen el formato correcto.
En este caso, lo importante es que, sin necesidad de realizar ninguna transmisión de datos por la red, se puede validar dicha información, mostrando al usuario un cuadro de diálogo en caso de que ésta sea incorrecta.
1.3 JavaScript en documentos HTML Se ofrece aquí un primer ejemplo en el que se ilustra la integración directa de código JavaScript en un documento HTML: <HTML> <HEAD> <TITLE>Primer ejemplo de JavaScript</TITLE> </HEAD> <BODY> Esto es texto normal de un documento HTML <SCRIPT LANGUAGE="JavaScript"> docurnent.write("Texto generado desde JavaScript") </SCRIPT> Esto es, de nuevo, HTML </body> </HTML> Como se puede observar, este ejemplo tiene la apariencia de un documento HTML estándar. La única novedad viene dada por la presencia del fragmento correspondiente al código JavaScript: <SCRIPT LANGUAGE="JavaScript"> document.write('Texto generado desde Javascript") </SCRIPT> Para poder ver el resultado de su ejecución, bastará con cargar dicho documento con cualquiera de los clientes Web antes mencionados. La salida, como se aprecia en las figuras adjuntas (para ambos clientes Web), se compone de tres líneas de texto: - Esto es texto normal de un documento HTML - Texto generado desde JavaScript - De nuevo HTML
‐76‐
En realidad no se trata de un script útil, puesto que todo lo que ofrece (mostrar una línea de texto) se podría haber hecho en HTML directamente y, sin duda, con mayor comodidad. Sólo se trata de mostrar el funcionamiento del código <SCRIPT>. En efecto, cualquier elemento que quede delimitado por los códigos <SCRIPT> y </SCRIPT> se considera código JavaScript . En este caso particular, se ha utilizado document.write , una de las funciones más importantes de JavaScript, que permite escribir algo en el documento actual (en este caso, el documento HTML que contiene el ejemplo).
1.4 Archivos de código Javascript
El atributo SRC del código SCRIPT del lenguaje HTML permite especificar un archivo que contiene el código JavaScript (en lugar de incrustar el código JavaScript en el documento HTML).
Por ejemplo:
<HEAD>
<SCRIPT SRC="comun.js"> ...
</SCRIPT> </HEAD> <BODY> ...
Este atributo es especialmente útil para compartir funciones entre numerosos documentos HTML.
Las sentencias JavaScript del interior de un código <SCRIPT SRC= ... > se ignoran a menos que la inclusión cause un error.
Se incluye una sentencia que muestre un mensaje de error en caso de no poder cargar el archivo de código.
Por ejemplo: <script src="http://www.mienlace.es/funciones/funcion1.js">
Los archivos JavaScript externos sólo pueden tener código JavaScript y ninguna sentencia HTML.
Clientes que no soportan JavaScript.- Estos clientes no admiten la etiqueta HTML <script>. Consideran la etiqueta SCRIPT y todo su contenido como texto normal, por ello, se hace preciso ocultar el código a clientes que no lo soporten. Para evitar esto, se utilizan los comentarios de HTML entre las etiquetas <SCRIPT> y </SCRIPT>:
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
Recuerda que es la forma de insertar comentarios en HTML.
Otra forma de conocer si un cliente soporta JavaScript es insertar el código <NOSCRIPT>...</NOSCRIPT>. De modo, los navegadores que no soporten JavaScript ejecutan las sentencias HTML alternativas incluidas dentro de esta etiqueta.
‐77‐
1.5 Javascript para aplicaciones servidor
En el servidor JavaScript también está integrado en páginas HTML. Las sentencias de JS del servidor pueden realizar multitud de tareas:
-Conectarse a bases de datos relacionales de varios fabricantes.
-Compartir información entre usuarios de una aplicación.
-Acceder a los ficheros del servidor.
-Comunicarse con otras aplicaciones a través de LIVECONNECT y JAVA.
Las aplicaciones JavaScript del servidor se compilan generando archivos binarios.
Existen servicios especiales de JavaScript en el servidor:
-Servicio de Gestión de Sesiones.
-Servicio de Bases de Datos LiveWire.
1.6 Comparación entre JavaScript y Java
JavaScript Java
Interpretado por el cliente Copilado (bytecodes). Se descarga del servidor y se ejecuta en el cliente
Orientado a Objetos Basado en clases El código se integra e incrusta en documentos HTML
Se utilizan APPLETS. Se accede a ellos desde documentos
Los tipos de datos de las variables no se declaran Es necesario definir los tipos de datos a las variables
No se puede escribir automáticamente en el disco duro No se puede escribir automáticamente en el disco duro
2. MANEJO DE SENTENCIAS SELECTIVAS E ITERATIVAS
A continuación presentamos un resumen de las sentencias más conocidas a nivel de lenguaje de programación.
INSTRUCCIONES Descripción
document.write(“<H1>texto</H1>”); Escribe la palabra texto en la página y se queda el cursor al final de esa página.
document.writeln(“<H1>texto</H1>”); Escribe la palabra texto en la página y mueve el cursor al principio de la próxima línea.
window.alert(“Mensaje”); Escribe la palabra Mensaje en una ventana de window separada del “browser”. Incluye un botón
‐78‐
de OK para continuar.
window.prompt(“Entre un numero”,”0”); Muestra una pantalla con el mensaje Entre un numero y en el “Text Box” aparece un valor inicial de cero (0).
variableNumInt = parseInt(Variable); Convierte el string que contiene la variable llamada Variable, en un número entero. Asigna el número a la variable variableNumInt.
variableNumReal = parseFloat(Variable); Convierte el string que contiene la variable llamada Variable, en un número real. Asigna el número a la variable variableNumReal.
+ = Suma
- = Resta
* = Multiplicación
/ = División
% = Modulus
Operadores matemáticos.
= == igualdad
≠ != no igual
> > mayor que
< < menor que
≥ >= mayor o igual
≤ <= menor o igual
Operadores relacionales
Primer nivel - () Paréntesis
Segundo nivel - *, /, %
Tercer nivel - +, -
Cuarto nivel - < <= > >=
Quinto nivel - == !=
Sexto nivel - =
Jerarquía
if (studentGrade >= 60)
document.writeln(“Paso el examen”); Estructura if/else
‐79‐
else
document.writeln(“No paso el examen”);
while (producto <=1000)
{
producto = 2 * producto;
document.writeln(producto);
}
Ciclo while
INSTRUCCIONES Descripción
for (i= 0; i < 10; i = i + 1)
{
document.writeln(“valor de i”);
document.writeln(i);
}
ciclo for
switch (opcion)
{
case “1”:
instrucciones si el valor es 1;
break;
case “2”:
instrucciones si el valor es 2;
break;
case “3”:
instrucciones si el valor es 3;
break;
default:
instrucciones si el valor no esta entre los anteriores;
}
Estructura case (multiple-selection structure)
‐80‐
do
{
instrucciones;
} while (condicion);
ciclo do-while
ARREGLOS
Ejemplo:
var my_array = new Array(10);
for (i = 0; i < 20; i++)
{
my_array[i] = i;
}
var my_array = new Array(10); Declara un arreglo de 11 posiciones (0-10). Trabaja en base 0.
for (i = 0; i < 20; i++)
{
my_array[i] = i; Le está asignando el valor del
} suscrito dentro del arreglo.
3. FUNCIONES
Una función es un elemento del programa creado con la finalidad de realizar una determinada acción. Una función puede ser llamada desde otra. En JavaScript, las funciones se definen en la cabecera del documento HTML. Su sintaxis es:
function nombreFunción([parámetros]) {
acciones }
Veamos un ejemplo: el siguiente script es una función que toma los valores de un formulario, y devuelve en un cuadro de texto del mismo el valor de la primera casilla elevado a la potencia de la segunda: <script> function potencia() {
var i=0; var resul=1; if(document.c á lculo.elevado.value==0)
document.c á lculo.resultado.value=resul; else
‐81‐
{ resul=document.c á lculo.base.value; for(i=1;i<document.c á lculo.elevado.value;i++)
resul=resul*document.c á lculo.base.value; } document.c á lculo.resultado.value=resul;
} </script>
Importante: las funciones siempre irán situadas en la cabecera del documento HTML.
Se debe recordar cómo se accede a los diferentes elementos de un documento HTML. Primero, document, después los nombres de los distintos elementos que existen en ese elemento:
-Cálculo: es el valor que se le ha dado al atributo "name" del formulario. -Resultado, base, elevado: es el valor que se le ha dado al atributo "name" de una de las cajas de texto del formulario.
En JavaScript, los parámetros de las funciones se pasan por valor, es decir, si una variable cambia de valor en la función, fuera de ella sigue teniendo el mismo valor que cuando entró en ella.
Si una función devuelve su resultado con return , la función debe ser asignada o formar parte de una respuesta. En caso contrario, si una función no devuelve un valor con "return", puede ser llamada sin ser asignada.
Los argumentos de las funciones se gestionan con un array propio de cada una de ellas. Al array se accede con "nombreFunción.arguments[i]", donde "i" es un índice que comienza por 0.
Para conocer el número de parámetros, podemos utilizar: "arguments.length".
Existe un conjunto de funciones predefinidas, veamos algunas de ellas:
Fecha:
getDate(): día del mes
getDay(): día de la semana
getMonth(): día del mes
getYear(): año (con dos dígitos)
‐82‐
getTime(): milisegundos transcurridos desde 1/1/1970
getHours(): hora entre 0 y 23
getMinutes(): minutos entre 0 y 59
getSeconds(): segundos entre 0 y 59
Existen las mismas funciones pero con "set" en lugar de "get", de modo que nos permiten cambiar el valor de esas variables.
3.2 Funciones de ventanas y funciones matemáticas
Tenemos tres formas de mostrar un mensaje al usuario en una ventana de aviso:
Alert: muestra el contenido de lo que le pasamos en una ventana con un botón de aceptar.
alert("Esto es una prueba")
Confirm: muestra un mensaje como "alert", pero con dos botones: aceptar y cancelar. Si se evalúa, al pulsar aceptar devuelve true y con cancelar, false .
Prompt: muestra una ventana donde podemos escribir un valor, de modo que después pueda ser asignado a una variable.
prompt("mensaje",valor por defecto)
3.3 Funciones Matemáticas.- Se trata de las propiedades de Math :
abs(): valor absoluto
max(v1,..,vn): valor máximo
min(v1,..,vn): valor mínimo
round(): redondear
exp(): exponencial
log(): logaritmo
pow(base,exponente): potencia
sqrt(): raíz cuadrada
sin(): seno
cos(): coseno
tan(): tangente
asin(): arcoseno
‐83‐
acos(): arcocoseno
atan(): arcotangente
4. MODELO DE OBJETOS Y EVENTOS EN JAVASCRIPT
Con esta entrega comienza la descripción de las propiedades y los métodos de los objetos del navegador. No es menester hacer una descripción exhaustiva de todas y cada una de las propiedades y métodos, objeto por objeto, con todo detalle. Mi intención es hacer una descripción más o menos detallada de las propiedades y métodos que tienen más posibilidad de ser usados. Es decir, que si me dejo alguna propiedad y/o método por comentar, siempre podeis buscarla los manuales de referencia de los respectivos navegadores.
En este capítulo vamos a estudiar la jerarquía que presentan los objetos del navegador, atendiendo a una relación "contenedor - contenido" que se da entre estos objetos. De forma esquemática, esta jerarquía 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">
‐84‐
+ submit <INPUT TYPE="submit">
+ text <INPUT TYPE="text">
+ textarea <TEXTAREA> ... </TEXTAREA>
- image <IMG SRC="...">
- link <A HREF="..."> ... </A>
- plugin <EMBED SRC="...">
+ frame <FRAME>
* navigator
Según esta jerarquía, 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 notación '.' también 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) y
caja_de_texto es el nombre del objeto textarea (cuyo nombre por defecto es textarea).
En la mayoría de los casos podemos ignorar la referencia a la ventana actual (window), pero será necesaria esta referencia cuando estemos utilizando múltiples ventanas, o cuando usemos frames. Cuando estemos usando un único frame, podemos pues ignorar explícitamente la referencia al objeto window, ya que JS asumirá que la referencia es de la ventana actual.
También podemos utilizar la notación de array para referirnos a algún 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 página HTML.
4.1 El Objeto Window
Se trata del objeto más alto en la jerarquía del navegador (navigator es un objeto independiente de todos en la jerarquía), pues todos los componentes de una página web están situados dentro de una ventana. El objeto window hace referencia a la ventana actual. Veamos a continuación sus propiedades y sus métodos.
‐85‐
Propiedades
• closed. Válida 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 según se definen en el documento HTML.
• history. Se trata de un array que representa las URLS visitadas por la ventana (están almacenadas en su historial).
• length. Variable que nos indica cuántos frames tiene la ventana actual. • location. Cadena con la URL de la barra de dirección. • 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 método open() que veremos cuando estudiemos los métodos. • 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.
Métodos
• alert(mensaje). Muestra el mensaje 'mensaje' en un cuadro de diálogo • 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 método
setInterval(), también del objeto window). A partir de NS 4, IE 4. • clearTimeout(nombre). Cancela el intervalo referenciado por 'nombre' (ver el método
setTimeout(), también del objeto window). • close(). Cierra el objeto window actual. • confirm(mensaje). Muestra un cuadro de diálogo 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 ratón sobre el objeto window actual. A partir de NS 3, IE 4.
• moveBy(x,y). Mueve el objeto window actual el número 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
parámetro en una ventana de nombre 'nombre'. Si esta ventana no existe, abrirá una ventana nueva en la que mostrará el contenido con las características especificadas. Las características 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 localización o no.
o directories = [yes|no|1|0]. Nos dice si la nueva ventana tendrá botones de dirección o no.
o status = [yes|no|1|0]. Nos dice si la nueva ventana tendrá barra de estado o no.
‐86‐
o menubar = [yes|no|1|0]. Nos dice si la nueva ventana tendrá barra de menús 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 tamaño (con el ratón) 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 diálogo que
contiene una caja de texto en la cual podremos escribir una respuesta a lo que nos pregunte en 'mensaje'. El parámetro 'respuesta_por_defecto' es opcional, y mostrará la respuesta por defecto indicada al abrirse el cuadro de diálogo. El método 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 número 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 expresión especificada después de que hayan pasado el número 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 expresión especificada después de que hayan pasado el número 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 métodos 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 explicación remito como ejercicio al lector interesado en saber más sobre el objeto window.
<!-- Manual de JavaScript de WebEstilo.com --> <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(); } //-->
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 métodos del objeto window.
Propiedades
• closed. Válida 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 según se definen en el documento HTML.
• history. Se trata de un array que representa las URLS visitadas por la ventana (están almacenadas en su historial).
• length. Variable que nos indica cuántos frames tiene la ventana actual. • location. Cadena con la URL de la barra de dirección. • 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 método open() que veremos cuando estudiemos los métodos. • 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.
‐88‐
Métodos
• alert(mensaje). Muestra el mensaje 'mensaje' en un cuadro de diálogo • 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 método
setInterval(), también del objeto window). A partir de NS 4, IE 4. • clearTimeout(nombre). Cancela el intervalo referenciado por 'nombre' (ver el método
setTimeout(), también del objeto window). • confirm(mensaje). Muestra un cuadro de diálogo 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 ratón sobre el objeto window actual. A partir de NS 3, IE 4.
• open(URL,nombre,caracteristicas). Abre la URL que le pasemos como primer parámetro en una ventana de nombre 'nombre'. Si esta ventana no existe, abrirá una ventana nueva en la que mostrará el contenido con las características especificadas. Las características que podemos elegir para la ventana que queramos abrir son las siguientes:
• prompt(mensaje,respuesta_por_defecto). Muestra un cuadro de diálogo que contiene una caja de texto en la cual podremos escribir una respuesta a lo que nos pregunte en 'mensaje'. El parámetro 'respuesta_por_defecto' es opcional, y mostrará la respuesta por defecto indicada al abrirse el cuadro de diálogo. El método 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 número 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 expresión especificada después de que hayan pasado el número 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 expresión especificada después de que hayan pasado el número 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 cómo se pueden cambiar propiedades de un frame en otro.
Este objeto contiene la URL actual así como algunos datos de interés 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:
• hash. Cadena que contiene el nombre del enlace, dentro de la URL. • host. Cadena que contiene el nombre del servidor y el número del puerto, dentro de la
URL. • hostname. Cadena que contiene el nombre de dominio del servidor (o la dirección 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 número 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 información pasada en una llamada a un script, dentro
de la URL.
Métodos
• 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
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 atrás 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 número de entradas del historial (i.e., cuántas
direcciones han sido visitadas). • previous. Cadena que contiene la URL completa de la anterior entrada en el historial.
Métodos
• 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 posición 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.
4.5 El objeto navigator
Este objeto simplemente nos da información relativa al navegador que esté utilizando el usuario.
Propiedades
• appCodeName. Cadena que contiene el nombre del código del cliente. • appName. Cadena que contiene el nombre del cliente. • appVersion. Cadena que contiene información sobre la versión del cliente. • language. Cadena de dos caracteres que contiene información sobre el idioma de la
versión 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
petición HTTP. Contiene la información de las propiedades appCodeName y appVersion.
Métodos
• javaEnabled(). Devuelve true si el cliente permite la utilización de Java, en caso contrario, devuelve false.
<!-- Manual de JavaScript de WebEstilo.com --> <HTML>
El objeto document es el que tiene el contenido de toda la página que se está visualizando. Esto incluye el texto, imágenes, enlaces, formularios, ... Gracias a este objeto vamos a poder añadir dinámicamente contenido a la página, o hacer cambios, según 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 métodos, y serán tratados en el siguiente capítulo.
• images. Array con todas las imágenes del documento • lastModified. Es una cadena con la fecha de la última modificación 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 título del documento actual • vlinkColor. Propiedad en la que se guarda el color de los enlaces visitados
Métodos
• clear(). Limpia la ventana del documento • open(). Abre la escritura sobre un documento.
‐92‐
• close(). Cierra la escritura sobre el documento actual • write(). Escribe texto en el documento. • writeln(). Escribe texto en el documento, y además lo finaliza con un salto de línea
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 parámetro TARGET
• hash. Es una cadena con el nombre del enlace, dentro de la URL • host. Es una cadena con el nombre del servidor y número de puerto, dentro de la URL • hostname. Es una cadena con el nombre de dominio del servidor (o la dirección 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 número de puerto, dentro de la URL • protocol. Es una cadena con el protocolo usado, incluyendo los : (los dos puntos),
dentro de la URL
‐93‐
• search. Es una cadena que tiene la información pasada en una llamada a un script, dentro de la URL
Gracias a este objeto (disponible a partir de la versión 3 de Netscape, aunque Microsoft lo adoptó en la versión 4 de su navegador) vamos a poder manipular las imágenes del documento, pudiendo conseguir efectos como el conocido rollover (cambio de imágenes al pasar el ratón sobre la imagen).
Propiedades
• border. Contiene el valor del parámetro '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 parámetro 'height' de la imagen. • hspace. Contiene el valor del parámetro 'hspace' de la imagen. • lowsrc. Contiene el valor del parámetro 'lowsrc' de la imagen. • name. Contiene el valor del parámetro 'name' de la imagen. • src. Contiene el valor del parámetro 'src' de la imagen. • vspace. Contiene el valor del parámetro 'vspace' de la imagen. • width. Contiene el valor del parámetro 'width' de la imagen.
<!-- Manual de JavaScript de WebEstilo.com --> <HTML> <HEAD> <title>Ejemplo de JavaScript</title> </HEAD>
‐94‐
<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>
4.9 El objeto Formulario
En este capítulo finalizamos el estudio de los objetos del navegador viendo cómo 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, ahorrándole la faena de tener que verificar la corrección de los datos enviados.
4.10 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.
‐95‐
Propiedades
• action. Es una cadena que contiene la URL del parámetro ACTION del form, es decir, la dirección en la que los datos del formulario serán 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 selección, la caja de texto será elements[0], el checkbox será elements[1] y la lista de selección será elements[2].
• encoding. Es una cadena que tiene la codificación mime especificada en el parámetro ENCTYPE del form.
• method. Es una cadena que tiene el nombre del método con el que se va a recibir/procesar la información del formulario (GET/POST).
Métodos
• reset(). Resetea el formulario: tiene el mismo efecto que si pulsáramos un botón de tipo RESET dispuesto en el form.
• submit(). Envía el formulario: tiene el mismo efecto que si pulsáramos un botón de tipo SUBMIT dispuesto en el form.
Vistas ahora las propiedades y métodos del objeto form, pasamos a estudiar, uno por uno, todos los objetos contenidos en el formulario.
4.11 Los objetos Text, TextArea y Password
Estos objetos representan los campos de texto dentro de un formulario. Además, 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 parámetro NAME. • value. Es una cadena que contiene el valor del parámetro VALUE. • maxlength. Número máximo de caracteres que puede contener el campo de texto.
Métodos
• blur(). Pierde el foco del ratón sobre el objeto especificado. • focus(). Obtiene el foco del ratón sobre el objeto especificado. • select(). Selecciona el texto dentro del objeto dado.
<!-- Manual de JavaScript de WebEstilo.com --> <HTML> <HEAD> <title>Ejemplo de JavaScript</title> </HEAD> <script LANGUAGE="JavaScript">
Tenemos tres tipos de botones: un botón genérico, 'button', que no tiene acción asignada, y dos botones específicos, 'submit' y 'reset'. Estos dos últimos sí que tienen una acción asignada al ser pulsados: el primero envía el formulario y el segundo limpia los valores del formulario.
Propiedades
• name. Es una cadena que contiene el valor del parámetro NAME. • value. Es una cadena que contiene el valor del parámetro VALUE.
Métodos
• click(). Realiza la acción de pulsado del botón
<!-- Manual de JavaScript de WebEstilo.com --> <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>
‐97‐
</form> </BODY> </HTML>
4.13 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 parámetro NAME. • value. Es una cadena que contiene el valor del parámetro VALUE.
Al contrario que con los checkbox, que nos permiten elegir varias posibilidades entre las dadas, los objetos radio sólo nos permiten elegir una de entre todas las que hay. Están pensados para
‐98‐
posibilidades mútuamente excluyentes (no se puede ser a la vez mayor de 18 años y menor de 18 años, 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 numérico que nos dice el número de opciones dentro de un grupo de
elementos radio. • name. Es una cadena que contiene el valor del parámetro NAME. • value. Es una cadena que contiene el valor del parámetro VALUE.
Hay que recordar que para agrupar elementos de tipo radio, todos ellos deben tener el mismo valor en NAME.
Métodos
• click(). Realiza la acción de pulsado del botón.
<!-- Manual de JavaScript de WebEstilo.com --> <HTML> <HEAD> <title>Ejemplo de JavaScript</title> </HEAD> <script LANGUAGE="JavaScript"> <!-- function Mostrar(boton) { msg="Elementos:"+formulario.edad.length+"\n"; msg+="Menor de 18 años:"+formulario.edad[0].checked+"\n"; msg+="Entre 18 y 60 años:"+formulario.edad[1].checked+"\n"; msg+="Mayor de 60 años:"+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 años.<br> <input type="radio" name="edad" value=">18 y <60" checked> Entre 18 y 60 años.<br> <input type="radio" name="edad" value=">60"> Mayor de 60 años.<br> </form> <A href="javascript:Mostrar()">Ver valores</A> </BODY> </HTML>
‐99‐
4.15 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 numérico que nos indica cuántas opciones tiene la lista • name. Es una cadena que contiene el valor del parámetro 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 opción está seleccionada
por defecto. o index. Valor numérico que nos da la posición de la opción dentro de la lista. o length. Valor numérico que nos dice cuántas opciones tiene la lista. o options. Cadena con todo el código HTML de la lista. o selected. Valor booleano que nos dice si la opción está actualmente
seleccionada o no. o text. Cadena con el texto mostrado en la lista de una opción concreta. o value. Es una cadena que contiene el valor del parámetro VALUE de la opción
concreta de la lista. • selectedIndex. Valor numérico que nos dice cuál de todas las opciones disponibles
está actualmente seleccionada.
<!-- Manual de JavaScript de WebEstilo.com --> <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 años</option> <option value=">18 y <60">Entre 18 y 60 años</option> <option value=">60">Mayor de 60 años</option> </select> </form> <A href="javascript:Mostrar()">Ver valores</A> </BODY> </HTML>
