MANUAL DE JAVASCRIPT
ELABORADO POR :
WALTER SOTO ESPINOZA
1,999
Uno de los aspectos m�s interesantes de la Word Wide Web es su capacidad de ofrecer contenidos interactivos a muchas personas. La Web es el mayor conjunto de informaci�n asequible para un ser humano desde el origen de los tiempos
Por primera vez, las ubicaciones de la Web tienen capacidad de interacci�n con sus usuarios. Aplicaciones muy sofisticadas, como programas de dibujo, hojas de calculo, juegos y complejas herramientas de c�lculo matem�tico, pueden ejecutarse ahora en la ventana del navegador, entre las paginas HTML, con solo disponer de un navegador preparado, sin necesidad de contar con un hardware o un software especializados.
Dos son las soluciones que han surgido en la Web para
dotarla de contenidos interactivos: el sencillo y manejable lenguaje de hipertexto
realzado (HTML) y el sofisticado y potente leguaje de programaci�n Java. Con estas dos
herramientas, los usuarios pueden crear contenidos atrayentes en su aspecto visual y
unirlos sin solucion de continuidad con las aplicaciones interactivas que brinda Java. Sin
embargo, lo que parece echarse de menos es un sistema que aproxime ambas tecnologias.
Netscape vi� la necesidad de tender un puente entre las dos tecnologias. Para ello se puso a trabajar en un nuevo lenguaje de ordenes que pudiera ocupar el vacio entre HTML y Java y que, a la vez, fuera lo suficientemente potente como para enlazar ambas tecnologias.
Cuando Netscape cre� ese nuevo lenguaje lo llam� LiveScript y lo introdujo de inmediato en su navegador mas popular, en un esfuerzo por conseguir que la comunidad de Internet lo adoptara cuanto antes. Poco despu�s Netscape y Sun se unieron para ayudar a que LiveScript consiguiera mayor difusion y para establecerlo como el lenguaje estandar de Internet para la escritura de ordenes basada en la Web. Dado que la sintaxis de LiveScript era muy similar a la de Java, ambas compa�ias decidieron rebautizar su nuevo producto para que pudiera ser identificado mejor, y lo llamaron JavaScript.
JavaScript fue creado como un lenguaje de ordenes facil de utilizar, abierto, de plataforma cruzada, capaz de enlazar objetos y recursos propios tanto de HTML como de Java. Si las miniaplicaciones de Java son fruto principalmente del trabajo de los programadores, JavaScript fue concebido para que pudieran usarlo los creadores de las paginas HTML en orden a controlar dinamicamente la interacci�n y el comportamiento de sus p�ginas. JavaScript tiene la particularidad de haber sido dise�ado para integrarse con HTML.
Una de las ventajas principales que ofrece es su capacidad de reducir el trafico de red, permitiendo la realizaci�n local de las tareas mas simples. En otras palabras: en lugar de encomendar esas tareas al servidor y hacer que este pase los resultados al navegador, el navegador puede realiar algunas de esas tareas a nivel local, con lo que el usario, ademas, obtiene sus respuestas en un tiempo mas corto.
JavaScript es a�n un lenguaje en evaluaci�n, algunas
de sus caracteristicas y comandos pueden variar en el futuro. Se han realizado todos los
esfuerzos necesarios para que la informaci�n aqu� contenida sea lo m�s actual posible.
Las diferencias entre Java y JavaScript son notables pero tambien sus similitudes.
En primer lugar Java es un lenguaje de programaci�n mientras que JavaScript es un lenguaje de scripts (como su nombre indica). �ste �ltimo es m�s sencillo de entender y usar que Java si no se tienen conocimientos previos de metodolog�a de programaci�n orientada a objetos. La mayor sencillez de JavaScript hacen que sea interesante aprender �ste �ltimo lenguaje como paso previo a adentrarse en el mundo de Java.
JavaScript es mucho m�s modesto pero precisamente por ello es m�s sencillo. Se basa en un modelo de instanciaci�n de objetos muy simple para el que no es necesario tener conocimiento de conceptos tales como herencia y jerarqu�as.
Soporta un sistema en tiempo de ejecuci�n basado en un peque�o n�mero de tipos de datos (num�rico, Boolean, y string) en el que ni siquiera es necesario declarar el tipo de variables. Sin embargo Java exige una gran rigidez en el tipo de datos utilizados y dispone de una amplia variedad de tipos b�sicos predefinidos, operadores y estructuras de control.
En Java uno de los principales bloques de programaci�n son las clases a las que se asocian funciones espec�ficas. Para utilizarlas es necesario instanciarlas en objetos. Los requerimientos de Java para declarar dichas clases, dise�ar sus funciones, y encapsular tipos hacen que la programaci�n en este lenguaje sea mucho m�s compleja que la realizada con JavaScript.
Otra diferencia importante es que Java es un lenguaje lo bastante potente como para desarrollar aplicaciones en cualquier �mbito. No es un lenguaje para programar en Internet, sino que se trata de un lenguaje de prop�sito general, con el cual se puede escribir desde un APPLET para una p�gina Web (�sto es es una peque�a aplicaci�n escrita con un determinado formato que se ejecuta en un trozo de un documento HTML) hasta una aplicaci�n que no tenga ninguna clase de conexi�n a Internet.
Los requerimientos tambien son diferentes; Para programar en JavaScript s�lo es necesario un editor de texto mientras que para programar en Java se necesita un compilador espec�fico.
La complejidad de Java es semejante a la de un programa en C++ mientras que la de JavaScript es cercana a la de uno en dBase, Clipper o sh.
Por otra parte, la sintaxis de ambos lenguajes es muy similar sobre todo en lo que a estructuras de control de flujo se refiere.
Existen adem�s mecanismos de comunicaci�n entre Java
y JavaScript.
En definitiva, la principal ventaja de JavaScript es su
simplicidad y su menor demanda de requisitos.
Relaci�n entre JavaScript y Java:
JavaScript |
Java |
| Interpretado (no compilado) en cliente. | Compilado en servidor antes de la ejecuci�n el el cliente. |
| Basado en objetos. Usan objectos, pero no clases ni herencia. | Programaci�n orientado a objetos. Los applets constan de clases objeto con herencia. |
| Codigo integrado en el c�digo HTML. | Applets diferenciados del c�digo HTML (accesibles desde las p�ginas HTML). |
| No es necesario declarar el tipo de las variables. | Necesario declarar los tipos. |
| Enlazado din�mico. Los objetos referenciados deben existir en tiempo de ejecuci�n (lenguaje interpretado). | Enlazados est�ticos. Los objetos referenciados deben existir en tiempo de compilaci�n (lenguaje compilado). |
CGI (the Common Gateway Interface) es una interfaz entre programas de aplicaci�n y servicios de informaci�n. Es decir, son un conjunto de reglas a cumplir tanto por parte del servidor como por parte del programa, pero se deja libertad al programador a la hora de escoger el lenguaje que considere mas adecuado para programar la aplicaci�n. Un programa en CGI puede ser escrito en cualquier lenguaje como: C/C++ , Fortran, PERL ,TCL, etc.
En JavaScript no existen restricciones a cumplir en el Servidor hasta el punto que ni siquiera es necesario que �ste exista.
Por otra parte y al contrario que CGI, JavaScript �nicamente depende del cliente y no del sistema operativo, s�lo necesita un browser capaz de interpretarlo. Cualquier persona puede desarrollar aplicaciones escritas en JavaScript del mismo modo que realiza p�ginas HTML. Esto no ocurre con aplicaciones CGI que necesitan la existencia de un servidor WWW para ser ejecutadas.
Con JavaScript todo el c�digo es trasladado al cliente y no se necesita la comunicaci�n a trav�s de la red cada vez que se produce un evento, como se requer�a en CGI.
Por otro lado, JavaScript no es un lenguaje v�lido
para desarrollar aplicaciones concurrentes y/o de acceso compartido.
Comparaci�n entre JavaScript y CGI:
JavaScript |
CGI |
| Es un lenguaje de programaci�n | Es una interfaz. Da libertad de elecci�n del lenguaje |
| No requiere un servidor de WWW | Exige la presencia de un servidor WWW |
| No requiere una red, funciona en local. | Requiere comunicaci�n en red. No funciona en local |
| La aplicaci�n reside en el cliente | La aplicaci�n reside en el servidor |
| Requiere un cliente especial | Sirve cualquier cliente, por simple que sea |
| Pensado para aplicaciones monousuario | Permite desarrollo de aplicaciones distribuidas, acceso concurrente y/o compartido |
| Tiempo de desarrollo muy breve | Tiempo de desarrollo medio |
JavaScript es un lenguaje de scripts compacto basado en objetos. Originariamente era denominado LiveScript, y fue desarrollado por Netscape para su navegador Netscape Navigator 2.0. Fue �ste el primer cliente en incorporarlo. Se ejecuta sobre 16 plataformas diferentes, incluyendo los entornos de Microsoft e incluso el MS Explorer lo incorpora en su versi�n 3.0 .
JavaScript permite la realizaci�n de aplicaciones de prop�sito general a trav�s de la WWW y aunque no est� dise�ado para el dessarrollo de grandes aplicaciones es suficiente para la implementaci�n de aplicaciones WWW completas o interfaces WWW hacia otras m�s complejas..
Por ejemplo, una aplicaci�n escrita en JavaScript puede ser incrustada en un documento HTML proporcionando un mecanismo para la detecci�n y tratamiento de eventos, como clicks del rat�n o validaci�n de entradas realizadas en forms.
Sin existir comunicaci�n a trav�s de la red una p�gina HTML con JavaScript incrustado puede interpretar, y alertar al usuario con una ventana de di�logo, de que las entradas de los formularios no son v�lidas. O bien realizar algun tipo de acci�n como ejecutar un fichero de sonido, un applet de Java, etc.
JavaScript se basa en el potente lenguaje Java en su uso y sintaxis, pero es interpretado, no compilado. Esto quiere decir que el codigo de aplicaci�n de JavaScript es transferido como texto al navegador junto con el texto HTML. Dicho codigo se ejecuta dentro del navegador, con lo que se capacita al usuario para desarrollar aplicaciones sencillas que puedan interaccionar con el usuario y ayudarle.
Con JavaScript es posible responder a determinadas acciones del usuario, tales como pulsaciones del raton, movimientos del raton sobre un vinculo, y crear una entrada de datos (input). Tambien se pueden crear paginas dinamicas que cambian a solicitud del usuario, e incluso ejecutar sonidos o miniaplicaciones cuando un usuario entra o abandona tu pagina. Este tipo de acomodacion a nivel del cliente permite una enorme capacidad de interactividad con los usuarios de sus paginas Web.
El lenguaje JavaScript se parece a Java, pero es mas
sencillo y mas facil de aprender. Una aplicacion en JavaScript puede tener tan solo una
linea u ocupar varias paginas. Su complejidad depende del grado en que sus instrucciones
hayan de interaccionar con la pagina en que se encuentra dicha aplicacion. Para la mayoria
de los creadores de paginas Web, una de las primeras utilidades de JavaScript se da en la
validacion de formularios. Se llama asi a la capcidad de un formulario en HTML para
comprobar los datos introducidos por un usuario antes de presentarlos, hecho que mejora
notablemente las prestaciones en su servidor y que a la vez disminuye la espera del
usuario.
JavaScript fue pensado para que fuera un lenguaje seguro. No permite el uso de punteros, que es la causa mas frecuente de violaciones de la seguridad.
Adem�s al ser un lenguaje interpretado, no hay problemas de tiempo de compilaci�n y asignaci�n de memoria, que es otra fuente potencial de violaciones de la seguridad.
Por �ltimo para minimizar la eficacia de programas malintencionadamente creados, JavaScript no permite incorporar c�digos grabados en disco.
JavaScript tiene el incoveniente de que el c�digo
fuente viaja dentro de la p�gina HTML con lo que cualquier usuario puede leer y modificar
dicho c�digo con lo que la �nica forma de proteger ese c�digo fuente es insertando una
nota de copyright en el c�digo fuente de la aplicaci�n.
Los recursos necesarios para poder utilizar y programar en JavaScript son pocos, este es uno sus aspectos mas atractivos, ya que cualquiera puede emplearlo directamente para crear sus propias aplicaciones.
Los requisitos hardware necesarios para ejecutar JavaScript son los mismos que se necesitan para ejecutar Netscape Navigator. Es decir que si puedes utilizar Navigator, tienes todo el hardware y software necesario para ejecutar aplicacioones JavaScript.
Para crear paginas Web que contengan funciones
JavaScript es posible emplear cualquier editor de texto. Y como JavaScript no necesita
compilaci�n, en cuanto el programa este archivado podra ser provado directamente en el
navegador.
Para que el navegador reconozca que un achivo contiene funciones escritas en JavaScript, dichas funciones se han de colocar entre dos etiquetas especiales : script ... /script
Entre estas dos etiquetas se colocaran las funciones que luego el navegador reconocera cuando cargue la pagina, estas etiquetas tienen atributos como LANGUAJE="JavaScript".
Ejecutar c�digo JavaScript es tan f�cil como
visualizar una pagina HTML, una vez cargada la pagina en el navegador, observar� los
resultados de las funciones JavaScript de forma inmediata. Las aplicaciones JavaScript
pueden comprobarse localmente sin necesidad de estar conectado a ninguna red, con lo que
los tiempos de carga son muy cortos.
Los programas en JavaScript aparecen incrustados en los propios documentos HTML como si de HTML se tratara. Pueden integrarse de dos formas:
1-. Como programas propiamente dichos, combinando funciones y sentencias, con el mismo aspecto que tendr�a el c�digo de cualquier otro lenguaje.
2.- Introduciendo manejadores de eventos JavaScript en etiquetas HTML.
Presentaremos los dos mecanismos:
La etiqueta script
La manera m�s convencional en que aparece JavaScript en un documento es en forma de programa. Podemos empezar por mostrar unos breves scripts y ver como son implementados dentro de documentos HTML. Empezaremos con un peque�o programa que muestra un texto en un documento HTML.
<html>
<head>
�Mi primer JavaScript!
</head>
<body> <br>
Este es un documento HTML normal
<br>
<script language="JavaScript">
document.write("Esto es JavaScript!")
</script> <br>
En HTML otra vez.
</body>
</html>
Este primer programa se limita a escribir en pantalla
un determinado texto para lo que se emplea el c�digo document.write. En este c�digo,
document es un objeto creado por el sistema que hace referancia al propio documento y
write es uno de los m�todos que proporciona para interactuar con �l. El resultado de
cargar este documento en un browser que interprete JavaScript ser� la aparici�n de los
dos textos, el escrito en JavaScript y el escrito en HTML, sin que el usuario sea
consciente del proceso.
El resultado seria:
Este es un document HTML normal.
Esto es JavaScript!
En HTML otra vez
Este script no es muy �til pero sirve para mostrar el
uso de la etiqueta <SCRIPT>. Puedes usar estas etiquetas en cualquier lugar del
documento, tanto en la cabecera como en el cuerpo, aunque si se declaran funciones es m�s
aconsejable hacerlo en la cabecera.
La etiqueta <SCRIPT>es una extensi�n de HTML en
la que se encierra el texto que compone el c�digo del programa JavaScript correspondiente
de la manera siguiente:
<SCRIPT>
Sentencias JavaScript...
</SCRIPT>
De esta manera el navegador que "entienda"
JavaScript reconocer� el texto encerrado entre estas etiquetas como c�digo JavaScript y
no lo mostrar� en la pantalla del cliente. Una cuesti�n importante a considerar es el
mantenimiento de la compatibilidad con navegadores anteriores. Cualquier browser ignora
las etiquetas desconocidas, por lo tanto, aquellos que no soporten JavaScript ignorar�n
el comienzo y el final del c�digo del programa (encerrado entre las etiquetas
<SCRIPT> y </SCRIPT>).Para que el resto del c�digo tambien sea ignorado y no
aparezca en la pantalla del cliente, lo encerraremos entre los s�mbolos de comentario
HTML, <!-- y -->.
Los navegadores que, por el contrario si lo soporten, interpretar�n el c�digo encerrado entre las etiquetas SCRIPT e ignorar� el principio de la linea en el script que comienza con la doble slash (//) o bien el encerrado entre "/*" y "*/", que son los s�mbolos de comentarios en este lenguaje.
Un documento puede tener varias etiquetas SCRIPT, y cada una de ellas incluir sentencias JavaScript diferentes.
Si queremos dar la posibilidad de ejecutar un c�digo alternativo a los browsers que no interpretan JavaScript, debemos utilizar las etiquetas <NOSCRIPT></NOSCRIPT>
Por ejemplo:
<SCRIPT>
<!-- Ocultaci�n a browsers antiguos
document.write("Si ves esto, tu browser interpreta JavaScript")
// Fin de la ocultaci�n -->
</SCRIPT>
</HEAD>
<BODY>
<NOSCRIPT>
Si ves esto, tu browser no incorpora la etiqueta
</NOSCRIPT>
</BODY>
</HTML>
Con vistas a un uso futuro, esta etiqueta admite un
par�metro opcional LANGUAGE que indica el lenguaje de script que se ha incrustado en el
documento as� como la versi�n de JavaScript.
<SCRIPT LANGUAGE="Versi�n de JavaScript";>
Sentencies JavaScript...
</SCRIPT;>
Versi�n de JavaScript especifica la versi�n de JavaScript en la que est� escrito el c�digo, y puede ser:
<SCRIPT LANGUAGE="JavaScript"> especifica JavaScript para Navigator 2.0.
<SCRIPT LANGUAGE="JavaScript1.1">
especifica JavaScript para Navigator 3.0.
Las sentencias encerradas entre las etiquetas son
ignoradas si el browser que las lee no tiene el nivel de JavaScript especificado en el
atributo LANGUAGE; por ejemplo:
Navigator 2.0 ejecuta el c�digo escrito con la etiqueta <SCRIPT LANGUAGE="JavaScript">e ignora el c�digo escrito en la etiqueta <SCRIPT LANGUAGE ="JavaScript1.1">.
Navigator 3.0 ejecuta el c�digo escrito entre las
etiquetas <SCRIPT LANGUAGE="JavaScript"> o <SCRIPT
LANGUAGE="JavaScript1.1">.
Si el atributo LANGUAGE es omitido, Navigator 2.0 asume
LANGUAGE="JavaScript" y Navigator 3.0 asume LANGUAGE="JavaScript1.1"
Puede usar el atributo LANGUAGE para escribir scripts
que contengan c�digo para Navigator 3.0 (con nuevas funciones que no exist�an en
versiones anteriores) y que no provoquen un error ejecut�ndose bajo Navigator 2.0.
Ejemplo. Este ejemplo muestra como usar dos versiones
diferentes de JavaScript una para JavaScript 1.0 y otro para JavaScript 1.1. El documento
cargado por defecto es para JavaScript 1.0. Si el usuario utiliza Navigator 3.0,
utilizar� la funci�n location.replace("..") implementada �nicamente en esta
versi�n de JavaScript.
<SCRIPT LANGUAGE="JavaScript1.1">
location.replace("mipagina.html") //Sustituye la p�gina actual por "mipagina.html"
</SCRIPT>
[Definici�n del resto de funciones compatibles...]
En el Netscape 3.0 se a�ade un nuevo par�metro
opcional a la etiqueta <SCRIPT>, SRC. El objeto del mismo es el de actuar como un
include, incluyendo en el documento un c�digo JavaScript que pueda ser compartido por
diversos documentos, es decir, posibilitar el uso de librerias. Se recomienda que �stas
tengan extensi�n ".js". La sintaxis asociada ser�:
El atributo SRC debe especificar una URL, relativa o
absoluta. Por ejemplo:
<SCRIPT SRC="libreria.js"></SCRIPT>
<SCRIPT
SRC="http://home.netscape.com/functions/libreria.js">
Esta libreria no puede contener c�digo HTML,
�nicamente definiciones de funciones JavaScript.
3.1 VARIABLES Y VALORES
Las variables de JavaScript contienen valores que se
emplean en la aplicaci�n. JavaScript permite asignar a sus variables valores para poder
referenciarlas en cualquier parte de su c�digo.
Los nombres de las variables distinguen entre may�sculas y min�sculas y deben comenzar
por una letra o un gui�n bajo ( _ ).
Los tipos de valores que puede contener una variable JavaScript son:
La palabra clave null asigna valores nulos a las
variables. JavaScript usa un �nico tipo de datos para n�meros, es decir, el n�mero
JavaScript puede contener enteros, reales y dobles sin tener que recurrir a tipos
diferentes especializados. Adem�s JavaScript maneja los objetos de datos con el mismo
tipo de datos.Para declarar las variables en JavaScript se utiliza la instrucci�n var.
A cada variable se le asigna un nombre, y opcionalmente, un valor inicial. Si no se trata
de una funci�n, la instrucci�n var es opcional, pero se recomienda utilizarla,
para evitar una sobreescritura de variables locales por parte de variables globales.
Las variables locales se declaran generalmente dentro de una funci�n para que s�lo esa funci�n pueda utilizar la variable. Las variables globales se declaran fuera de toda funci�n para que se puedan utilizar en todas las funciones.
La sintaxis para la instrucci�n var es la siguiente:
var nombrevar[=valor ] [..., nombrevar[=valor] ] |
Un ejemplo: var num_sillas =10, precio_por_silla =12.0;
Las aplicaciones en JavaScript pueden manejar numerosos tipos de datos diferentes, pero JavaScript se las arregla para hacerlo s�lo con tres tipos de datos distintos. Adem�s JavaScript puede decidir por el programador qu� tipo de variable deber�a emplearse durante la ejecuci�n de la secuencia de �rdenes.Los tipos de datos son convertidos autom�ticamente cuando se ejecuta la aplicaci�n en JavaScript. Para ello, no importa cu�n compleja sea la conversi�n, JavaScript realiza la conversi�n de izquierda a derecha. Es decir, el operando de la derecha ser� convertido al tipo del operando de la izquierda.Veamos un ejemplo. Si se tienen las variables
y luego se indican las siguientes instrucciones
la primera instrucci�n dar� como resultado que x contendr� la cadena "1210", porque al ser el operando de la izquierda una cadena el operando de la derecha ,que es var2, se convertir� igualmente en una cadena. La segunda instrucci�n convertir� var1 en un n�mero ya que el operando de la izquierda, var2, es un n�mero. Luego y contendr� el valor 22.Si ahora tuvi�semos el ejemplo
JavaScript generar�a un error ya que el operando de la
derecha, la cadena "Pedro", no podr�a convertirse en un valor num�rico.
Los valores iniciales que pueden asignarse a las variables se denominan literales. Estos tipos de valores no son variables, sino, m�s bien, expresiones constantes de valores para tipos de datos.Ejemplos de valores literales:
32
54.94
"programar es divertido"
A continuaci�n se explicar�n los distintos tipos de literales:
Un literal con coma flotante se especif�ca mediante los siguientes elementos: un entero decimal, una coma (o un punto) decimal, otro entero decimal, un exponente y alg�n tipo de sufijo. El exponente se indica mediante una e o E seguida por un entero positivo o negativo (se coloca delante el signo + o -). Un literal con coma flotante deber�a constar como m�nimo de un d�gito m�s una coma decimal o e o E. Ejemplos: 5,43 .4e3 2E-8-7.4e8
"manzana"
"pera"
Los literales de cadena pueden contener tambi�n caracteres especiales. Por ejemplo
"hola \r adi�s".
A continuaci�n se presenta una lista de caracteres especiales:
\b ==> retroceso
\f ==> salto de p�gina
\n ==> salto de l�nea
\r ==> retorno de carro
\t ==> tabulador
La sintaxis de la instrucci�n comentario es como sigue:
Puede igualmente ocultarse el c�digo JavaScript para los navegadores que no sean Netscape.Por ejemplo:
<SCRIPT>
< - - Esta linea comienza el comentario, escondiendo el c�digo siguiente de
los navegadores que no son Netscape
function HacerArray(n) {
this.longitud = n;
for (var i = 1; i <= n; i++) {
this [ i ] = 0}
return this
}
}
// - - > Esto termina el comentario. La instrucci�n //esconde el comentario
HTML desde JavaScript
</SCRIPT>
Los siguientes t�rminos reservados no pueden ser empleados para nombres de variables, funciones, m�todos u objetos.
| abstract | extends | int | super |
| boolean | false | interface | switch |
| break | final | long | synchronized |
| byte | finally | native | this |
| case | float | new | throw |
| catch | for | null | throws |
| char | function | package | transient |
| class | goto | private | true |
| const | if | protected | try |
| continue | implements | public | var |
| default | import | return | void |
| do | in | short | while |
| double | instanceof | static | with |
| else |
Las instrucciones de bucle que emplea actualmente JavaScript son:
El siguiente listado muestra un sencillo ejemplo de como se utilizan estas instrucciones:
<HTML>
<BODY>
<SCRIPT>
for (var i=0;i<10;i++) { document.write("Estas en el numero" + i +
"!<BR>");
if (i == 5)
document.write("Estas a mitad de camino".<P>");
}
</SCRIPT>
</BODY>
</HTML>
Esta operaci�n ejecutar� la operaci�n 10 veces mediante el bucle for, e
imprimir� las palabras Estas en el numero seguidas por el n�mero actual. La
instrucci�n if comprobar� cuando se alcanza el bucle 5 e imprimir� entonces las
palabras Estas a mitad de camino.
Cuando se establece una comparaci�n en JavaScript se debe usar un operador de comparaci�n entre los dos valores a comparar. Como resultado se obtendr� un valor booleano. Los operadores de comparaci�n son los siguientes:
Igual ==> == Distinto ==> != Mayor que ==> > Menor que ==> < Menor o igual a ==> <= Mayor o igual a ==> >=
La sintaxis para un bucle for es as�:
| for ( [instrucci�n inicial];
[condici�n]; [expresi�n actualizaci�n]) { instrucciones } |
Las tres expresiones que se encuentran dentro del par�ntesis son optativas. La instrucci�n inicial en un bucle for puede contener una declaraci�n de variable, que se efect�a empleando la palabra clave var. Un ejemplo de la instrucci�n for:
for (var i = 0; i < 10; i++) {
total = total + i;
display_total (total);
}
En este ejemplo el bucle for se ejecutar� 10
veces antes de terminar. En cada iteraci�n i se incrementa en 1 hasta que la instrucci�n
i <10 deje de ser verdadera. Para bloques de c�digo de una s�la l�nea no hace falta
emplear el par de llaves ({ }).
La sintaxis de la instrucci�n for...in es la siguiente:
| for (var in obj) { instrucciones } |
La instrucci�n for...in itera una variable sobre todas las propiedades de un objeto. La palabra clave in fija var para la primera propiedad de obj. Cuando termine de ejecutarse la instrucci�n ya habr� recorrido todas las propiedades de obj. Vease el siguiente ejemplo:
function propiedades_del_objecto(obj,nombre_obj) {
var resultado = "";
i = "";
for (i in obj)
resultado += nombre_obj + "." + i + "=" + obj[i] + "\n";
return resultado;
}
Este ejemplo se ejecutar� por todas las propiedades de
obj y las visualizar� junto con el valor de la propiedad.
Su sintaxis es la siguiente:
| while (condici�n) { instrucciones } |
El siguiente ejemplo mantiene el bucle en acci�n hasta
que la variable dinero alcanza su meta prefijada de 100.00.El segundo cero despu�s
del punto o coma decimal es innecesario, pero se usa para facilitar la lectura del c�digo
y para indicar al lector del c�digo que se est� hablando de dinero.
dinero = 0.00;
while (dinero < 100.00) {
dinero += 5.00;
}
En un bucle while o for, una instrucci�n break interrumpe el bucle y contin�a la ejecuci�n del c�digo posterior al bucle. La sintaxis es:
| break |
En el siguiente ejemplo el bucle while se interrumpe cuando la variable i toma el valor 2.
function func(x) {
var i = 0;
while (i < 5) {
if ( i == 2)
break;
i++;
}
return i*x;
}
La instrucci�n continue finaliza la ejecuci�n
del bloque actual en un bucle y contin�a el bucle con la siguiente iteraci�n. Si en el
ejemplo anterior sustituimos la instrucci�n break por continue cuando la
variable i tome el valor 2, el bucle while salta la linea i++ y contin�a el
bucle.
Su sintaxis es:
| if (condici�n) { instrucciones } [else { instrucciones }] |
La instrucci�n if...else puede ser anidada.
Veamos un ejemplo:
if ( tipo_libro (libro_javascript) ==
"*****") {
bueno = true;
}else
bueno = false;
Una expresi�n condicional en JavaScript es un m�todo para comprobar un valor cuyo resultado puede ser uno de dos posibles valores. Por ejemplo:
edad_suficiente = (edad =18) ? "Conducir hasta casa" : "Andar hasta casa"
Se comprueba primero la instrucci�n dentro del
par�ntesis, si es verdadera se escoge el primer valor detr�s del signo de
interrogaci�n. Si no, se escoge el segundo valor detr�s de la interrogaci�n.
Esta instrucci�n permite especificar un objeto como objeto predeterminado cuando se ejecutan instrucciones dentro de su bloque de c�digo.
| with (objeto) { instrucciones } |
Un ejemplo utilizando el objeto Math
with (Math) {
a = PI * r * r;
x = r * cos(alfa);
y = r * sin(alfa);
}
El signo = asigna el valor del operando de la derecha al resultado de la izquierda. Por ejemplo x=10 asigna el valor 10 a la variable x.
A continuaci�n se presentan una serie de notaciones
abreviadas para las asignaciones. Estas notaciones se aplican a todos los operadores
aritm�ticos y de bits.
x += y es igual a x = x + y
x -= y es igual a x = x - y
x <<= y es igual a x =x << y
Los operadores de cadena incluyen los operadores de comparaci�n mencionados anteriormentey el operador de concatenaci�n (+). Por ejemplo la instrucci�n
"Java" + "Script"
dar� como resultado
"JavaScript"
Igualmente si la variable str contiene el valor "Java", la instrucci�n
str +="Script"
dar� tambi�n como resultado la cadena "JavaScript".
| Operador | Funci�n | Ejemplo |
| + | suma | x = a + b |
| - | resta | x = a - b |
| * | multiplicaci�n | x = a * b |
| / | divisi�n | x = a / b |
| % | m�dulo | 12 % 5 = 2 |
| ++ | incremento | x++ |
| -- | decremento | y-- |
| _ | negaci�n unaria | x = _y |
En la siguiente tabla se describen los operadores
l�gicos.
| Operador | Funci�n | Ejemplo |
| && | Y, verdadero si ambos son verdaderos | expr1 expr2 |
| | | | O, verdadero si uno de los dos es verdadero | expr1 | | expr2 |
| ! | NO, niega el operando | !expr1 |
La siguiente tabla muestra los operadores a nivel de
bit.
| Operador | Funci�n | Ejemplo |
| & | Y a nivel de bit. Devuelve un uno si los dos operandos son unos. | x = a & b |
| | | O a nivel de bit.Devuelve un uno si algunos de los dos operandos es uno. | x = a | b |
| ^ | XOR a nivel de bit. Devuelve un uno si uno pero no ambos operandos es uno. | x = a ^ b |
| << | Desplaza bits a la izquierda un n�mero especificado de veces. Los bits que sobran por la izquierda se descartan y se incluyen los bits cero desde la derecha | x = a << 4 |
| >> | Desplaza bits a la derecha un n�mero especificado de veces. Los bits que sobran por la derecha se descartan y se incluyen por la izquierda copias del bit m�s a la izquierda. | x = b >> 5 |
| >>> | Desplaza bits a la derecha y los sustituye por ceros. Los bits sobrantes por la derecha se descartan y se incluyen los bit cero desde la izquierda. | x = a >>> 2 |
La siguiente lista muestra la precedencia de los operadores de JavaScript, de menor a mayor:
6.- OBJETOS
Un objeto, como antes ya se ha comentado es una agrupaci�n de variables denominadas propiedades, que pueden ser a su vez otros objetos, junto a un conjunto de m�todos o funciones que realizan operaciones con las variables propias del mismo.
Existen objetos predefinidos ya en el navegador cliente
pero podemos definirnos nuevos objetos.
6.1 Objetos y propiedades.
Para acceder a las propiedades de un objeto basta hacer uso de la dot notation (notaci�n del punto). Ejemplo:
objeto1.propiedad2
Recordemos a la hora de nombrar objetos y variables que JavaScript es case-sensitive.
La relaci�n entre arrays y objetos y las propiedades de estos es enorme puesto que si tenemos por ejemplo el siguiente objeto:
Objeto: Ficha
Propiedades: nombre, edad, sexo
Podemos acceder a las propiedades del objeto tanto para asignar valores como para l�elos haciendo uso de la dot-notation y tambi�n como si el objeto fuera un vector y las propiedades elementos de este ordenadas seg�n se definieron.
As� y para un objeto Ficha llamado miFicha, son equivalentes los tres conjuntos de sentencias siguientes:
miFicha.nombre = "Tony"
miFicha.edad = 23;
miFicha.sexo = "varon"
miFicha["nombre"] = "Tony"
miFicha["edad"] = 23;
miFicha["sexo"] = "varon"
miFicha[0] = "Tony"
miFicha[1] = 23;
miFicha[2] = "varon"
Este tipo de vectores se denominan arrays asociativos. Veamos ahora una funci�n que nos mostrara las propiedades de un objeto pas�ndole el tipo del mismo y su nombre. Es la funci�n shows_props() anteriormente mencionada:
function show_props(obj, obj_name) {
var result = ""
for (var i in obj) {
result += obj_name + "." + i + "
= " + obj[i] + "\n"
}
return result;
}
Utilizando esta funci�n con el objeto miFicha el resultado seria:
miFicha.nombre = Tony
mi.Ficha.edad = 23
miFicha.sexo = varon
Para crear un nuevo objeto en JavaScript primero hay que crearse una funci�n para ese objeto, y despu�s hay que crear un ejemplo de ese objeto con la palabra clave new.
Por ejemplo, en primer lugar se crea la funci�n:
function persona(nombre, edad, altura, peso) {
this.nombre=nombre;
this.edad=edad;
this.altura=altura;
this.peso=peso;
this.imprime = imprime;
}
La palabra clave this da a entender a la funci�n que debe referirse a s� misma a la hora de hacer las asignaciones de propiedad. Cuando se definen funciones, pueden utilizarse tambi�n otros objetos como propiedades en esa funci�n. Para a�adir m�todos a los objetos hay que especificar en la definici�n del objeto la funci�n que ha de emplearse para el m�todo. En el ejemplo anterior se ha a�adido un m�todo denominado imprime. La funci�n imprime tendr�a que haberse definido de forma que se especificara como m�todo en un objeto. A�adir un m�todo a la definici�n de un objeto garantiza que todos los objetos que se creen contendr�n el m�todo. Para a�adir un m�todo s�lo al objeto que se est� empleando y no a la propia definici�n se utilizar�a la instrucci�n:
objeto.imprime = imprime;
Para crear un nuevo objeto de la funci�n persona se utilizar�a la instrucci�n siguiente:
unapersona = new persona("Pablo", 23, 176,
75);
Cuando se carga un documento en el NetScape Navigator se crea autom�ticamente una nueva colecci�n de objetos para describir el documento actual y la ventana del navegador. Estos objetos se presentan en la siguiente jerarqu�a:
El objeto document contiene tambi�n otros objetos:
Entre las propiedades m�s �tiles del objeto window se encuentran las tramas o frames y el status o estado.
window.frames['frame1'].document.bgColor = "red ";
La instrucci�n anterior podr�a tambi�n escribirse omitiendo window.
El objeto window contiene tambi�n algunos m�todos �tiles para interaccionar con el usuario.
window.alert ("Error");
window.confirm ("Est� seguro de que quiere salir?");
6.3.2 El objeto document
Con el objeto document un programa en JavaScript puede generar de forma inmediata c�digo HTML, as� como reaccionar a la entrada o a la salida del usuario en la p�gina. Algunas de las propiedades importantes del objeto document son:
Algunos de los m�todos m�s interesantes del objeto document son los siguientes:
Este objeto permite denominar formularios, modificar, crear o comprobar el valor de sus campos antes de presentarlo al servidor.
valor1 = document.forms[0].field1.value;
valor2 = document.forms[0].field2.value;
La indicaci�n cero en la propiedad forms indica que es el primer formulario del documento.
Tambi�n se puede acceder a un formulario por el nombre:
valor1 = document.miform.field1.value
valor2 = document.miform.field2.value
El objeto form contiene un objeto para cada campo de la forma a que se refiere: checkbox, hidden, radio, reset,submit, text y textarea. Todos estos objetos tienen las propiedades name y value.Los tipos de campo radio y checkbox contienen una propiedad checked para determinar si el elemento form ha sido o no comprobado.
<FORM ACTION="doit.cgi"></FORM>
el m�todo submit del objeto form har�a que el
navegador sometiera el formulario al programa doit.cgi.
6.3.4 El objeto Anchor
Descripci�n: Un anchor es una parte de texto que define una etiqueta (target) para ser referenciada desde otro sitio o un enlace de hipertexto.
Sintaxis: Para definir un anchor se utiliza la
notaci�n HTML:
<A [HREF=URLdestino] NAME="nombreAnchor" [TARGET="nombreVentana"]> texto </A>
HREF=URLdestino identifica el URL destino de pulsar este anchor. Solo se utiliza si en anchor es un enlace.
NAME="nombreAnchor" nombre que le damos al anchor para usarlo como target.
TARGET="nombreVentana" especifica donde se
cargara el documento al que se enlaza, solo es �til si es un enlace.
Propiedades: No tiene
M�todos: No tiene
Manejadores de eventos: No tiene
Objeto propiedad de: document
Ejemplo 1. Definici�n de un anchor target.
<A NAME"introduccion"><H3> Bienvenido a JavaScript </H3></A>
Ejemplo 2. Definici�n de un enlace al target anterior. Suponemos que el target anterior lo hab�amos definido en el archivo intro.html.
<A HREF="intro.html#introduccion">
Introducci�n </A>
El array anchors.
Todos los anchors que creamos se almacenan en el array anchors del objeto documento y si adem�s estos anchors son enlaces, tambi�n se guardan en el array links del mismo document.
Podemos referirnos a cualquier anchor utilizando el array anchors:
document.anchors[indice] indice es un entero
document.anchors.length devuelve el n�mero de anchors
Pero hay una restricci�n y es que los elementos de
anchors solo se pueden leer.
6.3.5 El objeto button.
Descripci�n: Un objeto button es un bot�n que forma parte de un form y debe ser definido dentro del mismo. Podemos definir una acci�n ante la pulsaci�n del bot�n y lo haremos a trav�s del atributo onClick.
Sintaxis:
<INPUT TYPE="button" NAME="nombreB" VALUE="textoBoton" [onClick="manejador"]>
NAME="nombreB" nombre que le asignamos al bot�n para identificarlo posteriormente para su utilizaci�n.
VALUE="textoBoton" etiqueta de texto que
aparece en el bot�n.
Propiedades: name y value
M�todos: click
Manejadores de eventos: onClick
Objeto propiedad de: form
Ejemplo 1. Definici�n de un bot�n que activa un calculo.
<INPUT TYPE="button"
VALUE="Calculo" NAME="botonC" onClick=play(this.form)">
6.3.6 El objeto checkbox.
Descripci�n: Se trata de un conmutador que puede activar/desactivar un valor. Pertenece a un formulario y debe ser definido dentro de este.
Sintaxis:
<INPUT TYPE="checkbox" NAME="nombreC" VALUE="valorC" [CHECKED]
[onClick="manejador"]> texto
NAME=nombreC especifica el nombre del bot�n.
VALUE=valorC especifica un valor que es devuelto cuando el chekbox se selecciona.
CHECKED si aparece, el valor por defecto es
seleccionado.
Propiedades:
name
value
checked
defaultChecked
M�todos: click
Manejadores de eventos: onClick
Objeto propiedad de: form
Ejemplo 1. Definici�n de 3 checkboxes.
<INPUT TYPE="checkbox" NAME="check1" CHECKED> Uno
<INPUT TYPE="checkbox" NAME="check2"> Dos
<INPUT TYPE="checkbox"
NAME="check3"> Tres
astring = "Hola"
crear�a un objeto de cadena denominado astring.Los literales de cadena son tambi�n objetos de cadena.
resultado = Math.sin(1.2645);
Para crear un nuevo objeto Date se utiliza la sintaxis:
| datevar = new Date(parameters); |
Los par�metros pueden ser :
1. Nada. Crea la fecha y hora actuales.
2. Una cadena con el formato "Mes,d�a,a�o, hora:minutos:segundos". Si se omiten las horas, los minutos y los segundos se fijar�n a cero.
3. Un juego de valores enteros para a�o, mes y d�a o para a�o, mes, d�a, hora, minutos y segundos. Ejemplo:
fech1 = new Date(97,0,12)
fech2 = new Date(97,0,12,11,44,8)
En JavaScript los segundos, minutos, horas, d�as y meses comienzan por el 0, no por el 1. Por ello el mes de enero se designar� con un 0.
La funci�n m�s �til que incorpora JavaScript es eval. Si toma como par�metro una expresi�n num�rica, se eval�a y da un resultado. Si toma como par�metro una cadena, la convierte en expresi�n num�rica y da el resultado. Esta funci�n tiene la ventaja de aceptar expresiones de formularios y evaluarlos directamente.
Las funciones son uno de los pilares sobre los que se apoya JavaScript Una funci�n es un conjunto de sentencias o procedimiento que realizara unas operaciones adecuadas haciendo uso de determinadas variables y propiedades.
Veamos las partes de la definici�n de una funci�n:
1. Nombre de la funci�n.
2. Lista de par�metros de entrada (entre par�ntesis y separados por ',').
3. Conjunto de sentencias en JavaScript encerradas entre llaves: { } .
Los par�metros se le pasan a las funciones siempre por valor, es decir, si la funci�n modifica el valor que se le pasa esto no afecta a la variable global al terminar la ejecuci�n de la funci�n.
Si nos interesa que la funci�n devuelva alg�n valor debe haber una sentencia con la palabra reservada return seguida del valor a devolver.
Ya comentamos que es muy �til definir las funciones en la cabecera del documento HTML para asegurarnos de que se cargan antes de cualquier acci�n del usuario.
La definici�n de una funci�n no implica su
ejecuci�n. La ejecuci�n se har� al hacer una llamada a dicha funci�n. Los par�metros
de entrada a una funci�n pueden ser cualquier tipo de variable incluso objetos enteros.
Podemos definir funciones recursivas pero OJO con ellas.
La sintaxis de la instrucci�n function
es la siguiente:
| function nombre([param] [,param]
[...,param]){ instrucciones } |
Cada funci�n tiene su propio y �nico nombre as� como una lista de par�metros opcionales. Mientras se est� usando Netscape Navigator, se puede llamar a cualquier funci�n que haya sido definida en la p�gina actual. Para utilizar funciones en el c�digo HTML es mejor ubicarlas en la porci�n <HEAD>..</HEAD> de la p�gina. As� cuando se cargue la p�gina, todas las funciones que puedan necesitarse para esta p�gina estar�n ya cargadas. Una vez completadas, las funciones pueden dar valores como resultado empleando la instrucci�n return.
Las funciones no pueden anidarse.
He aqu� un ejemplo de declaraci�n de una funci�n:
function centrar_cadena (msg) {
document.write("<CENTER>" + msg + "</CENTER>");
}
Y esta es la forma de llamar a la funci�n:
<SCRIPT LANGUAGE="JavaScript">
centrar_cadena("Esto es una llamada a una funci�n");
</SCRIPT>
Tambi�n se puede llamar a una funci�n a trav�s de un objeto, utilizando los m�todos de ese objeto. Los m�todos de JavaScript son funciones asociadas a un objeto. La definici�n de una funci�n como un m�todo de objeto se realiza de la misma forma que se define una propiedad normal, pero esta vez se usa un nombre de funci�n en lugar de emplear una variable literal o de valor. Del mismo modo para llamar a una funci�n definida como parte de un objeto se emplea el mismo procedimiento que si se estuviera accediendo a una propiedad del objeto.
Las funciones pueden definirse en cualquier parte del documento pero es aconsejable declararlas en la cabecera; de esta forma se garantiza que todas las funciones se cargen antes se que el usuario tenga la oportunidad de realizar ninguna acci�n en la que llame a una de ellas.
El siguiente ejemplo define una funci�n en la cabecera (HEAD) de un documento y la llama en el cuerpo (BODY).
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Oculto el c�digo a los browsers que no entiendan "JavaScript"
function cuadrado(numero) {
return numero * numero
}
// Final de la ocultaci�n-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
document.write("La funci�n retorna ", cuadrado(5),
".")
</SCRIPT>
</BODY>
La funci�n cuadrado tiene un argumento, llamado numero. La funci�n consta de una
sentencia return numero * numero que indica que ha de retornar el cuadrado del n�mero
pasado por par�metro.
En el cuerpo del documento hacemos una llamada a la funci�n definida mediante la sentencia:
cuadrado(5)
La funci�n ejecuta la sentencia numero * numero como 5 * 5 y retorna el valor 25, el script muestra el siguiente resultado en pantalla:
La funci�n retorna 25.
7.2 Uso de funciones predefinidas.
JavaScript dispone de varias funciones predefinidas.
Estas son:
7.2.1 La funci�n eval.
Esta funci�n toma un string como argumento que puede ser:
1. Un string representando una expresi�n JavaScript.
2. Una Sentencia.
3. Una secuencia de sentencias.
Este string puede contener variables y propiedades de objetos ya existentes.
Esta funci�n es �til para evaluar un string
representando una expresion aritm�tica. Veamos un ejemplo con un formulario con un campo
de texto de entrada de datos en el que introduciremos una expresion, un bot�n de calculo
y un campo de texto de salida de resultados:
<SCRIPT LANGUAGE="JavaScript">
function calculo(form) {
form.result.value = eval(form.expr.value)
}
</SCRIPT>
<FORM>
Introduce una expresi�n:
<INPUT TYPE="text" NAME="expr" SIZE=20 >
<INPUT TYPE="button" VALUE="Calculo"
onClick="calculo(this.form)">
<BR>
Resultado:
<INPUT TYPE="text" NAME="result" SIZE=20 >
<BR>
</FORM>
Otro ejemplo puede ser el definir la siguiente funci�n:
function setValor(miobj, mivalor) {
eval("document.forms[0]." + miobj + ".value") = mivalor;
}
Podemos llamar a esta funci�n para que ponga el valor 100 en el campo de texto text1:
setValor(text1, 100)
7.2.2 Las funciones parseInt y parseFloat.
A estas funciones se le pasa un string y lo convierten a un valor num�rico:
parseFloat convierte el string en un n�mero real en coma flotante, va a entender dentro del string los n�meros del 0 al 9, los signos '+' y '-', el punto decimal '.' y el exponente (e o E). Si encuentra otro car�cter que no sea uno de los mencionados, convierte lo que hasta aqu� tenga ignorando lo restante. Y si el primer car�cter ya no es uno de los validos devuelve NaN.
parseInt convierte el string en un entero de la
base especificada (base 10, 16 u 8). Caso de encontrarse con caracteres que no sean
n�meros opera igual que hacia parseFloat.
8.- M�TODOS.
Un m�todo es una funci�n pero esta asociada a un objeto, es particular a los objetos del tipo que la defina.
Los m�todos se definen en el mismo sitio que las funciones y de la misma forma para luego asociarlo a un objeto de la siguiente forma:
objeto.nombreMetodo = nombreFuncion
, donde nombreFuncion es la funci�n que queremos que sea m�todo, nombremetodo es el nombre que le damos al m�todo y objeto el objeto al que asociamos el m�todo.
Para ahora hacer llamadas al m�todo haremos uso de la dot-notation:
objeto.nombreMetodo(param1, param2, ...);
Al igual que en otros lenguajes orientados al objeto como C++ o Java, el lenguaje JavaScript dispone tambi�n de la palabra reservada 'this' para hacer referencia al objeto actual. Suele usarse cuando pasamos objetos como par�metros a funciones y dentro de estas para acceder a propiedades de los objetos.
Una funci�n consta de las siguientes partes b�sicas:
Es importante entender la diferencia entre definir una funci�n y llamarla.
Definir una funci�n es simplemente especificar su
nombre y definir que acciones realizar� en el momento en que sea invocada. Para ello se
emplea la palabra reservada function.
8.1 El m�todo alert.
Descripci�n: Representa un cuadro de dialogo en el que
se escribe un mensaje de tipo informativo o de aviso hacia el usuario y que adem�s tiene
un bot�n de aceptaci�n (OK).
Sintaxis:
alert("mensaje")
nombreVentana.alert("mensaje")
, mensaje es un string o propiedad de un objeto existente.
M�todo del objeto: window
8.2 El m�todo anchor.
Descripci�n: Crea un anchor o ancla en un documento HTML que ser� utilizado como
enlace o target hipertexto.
Los anchors creados con este m�todo tambi�n forman parte del array anchors.
Sintaxis:
texto.anchor(nombre)
, texto es un string o propiedad de un objeto existente. Texto a ver.
, nombre es un string o propiedad de un objeto existente (es el NAME de la etiqueta
<A>).
M�todo del objeto: string
Ejemplo: Los dos grupos de sentencias siguientes
producen el mismo resultado:
var texto = "Contenido desde aqui"
ventana1 = window.open("","nombreVentana")
ventana1.document.writeln(texto.anchor("nombreAnchor"))
ventana1.document.close()
<A NAME="nombreAnchor"> Contenido desde aqui </A>
8.3 El m�todo back.
Descripci�n: Carga el URL anterior al actual.
Sintaxis:
history.back()
M�todo del objeto: history
8.4 El m�todo big.
Descripci�n: Representa un string en un tama�o de fuente grande, igual que si
hici�ramos uso de la etiqueta <BIG>. Se usa dentro de los m�todos write o writeln.
Sintaxis:
texto.big()
, texto es un string o propiedad de un objeto
existente.
M�todo del objeto: string
8.5 El m�todo blink.
Descripci�n: Equivale a utilizar la etiqueta
<BLINK> HTML. El resultado es producir que el string sobre el que se aplica parpadee
al visualizarse en el navegador.
Sintaxis:
texto.blink()
, texto es un string o propiedad de un objeto existente.
M�todo del objeto: string
8.6 El m�todo blur.
Descripci�n: Quita el focus del objeto que lo llama.
Sintaxis:
nombreObjeto.blur()
nombreObjeto es el nombre asignado en NAME a un objeto de tipo: password, select, text o
textarea.
M�todo del objeto: pasword, select, text y textarea
8.7 El m�todo bold.
Descripci�n: Da el atributo negrita a un string. Equivale a la etiqueta <B>
utilizada directamente desde HTML.
Sintaxis:
texto.bold()
, texto es un string o propiedad de un objeto existente.
M�todo del objeto: string
8.8 El m�todo clear.
Descripci�n: Borra el documento en una ventana. Suele
utilizarse seguido del m�todo document.close() para cerrar el documento.
Sintaxis:
document.clear()
M�todo del objeto: document
8.9 El m�todo clearTimeout.
Descripci�n: Anula un timeout que antes se hab�a
fijado con el m�todo setTmeout.
Sintaxis:
clearTimeout(identificadorTimeout)
, identificadorTimeout es el nombre del timeout que anulamos.
M�todo del objeto: frame y window
8.10 El m�todo click.
Descripci�n: Equivale a la pulsaci�n del bot�n
izquierdo del rat�n.
Sintaxis:
nombreObjeto.click()
, nombreObjeto es el nombre asignado en NAME a un objeto de tipo: button, checkbox, radio
reset o submit.
Seg�n el elemento, el click produce un evento u otro:
Para objetos button, submit o reset equivale a la pulsaci�n del bot�n.
Para un objeto radio, equivale a seleccionar ese objeto.
Para un objeto checkbox, produce la selecci�n de esa
opci�n.
M�todo del objeto: button, checkbox, radio reset y
submit
8.11 El m�todo confirm.
Descripci�n: Abre una ventana de confirmaci�n con un
mensaje y con dos botones: uno de confirmaci�n (OK) y otro de cancelaci�n (cancel) .
Sintaxis:
confirm("mensaje")
nombreVentana.confirm("mensaje")
, mensaje es un string o propiedad de un objeto existente.
M�todo del objeto: window
8.12 La funci�n eval.
Descripci�n: Esta funci�n eval�a el string de
entrada a un valor. Es una funci�n predefinida en JavaScript y no pertenece a ning�n
objeto. No hace falta llamar a eval para hacer simplemente una expresi�n aritm�tica.
Sintaxis:
eval(texto)
, texto representa un string que ser� una expresi�n JavaScript, una sentencia o un
bloque de sentencias.
8.13 El m�todo fixed.
Descripci�n: Da el atributo de maquina de escribir a
un string. Equivale a la etiqueta <TT> de HTML.
Sintaxis:
texto.fixed()
, texto es un string o propiedad de un objeto ya existente.
M�todo del objeto: string
8.14 El m�todo focus.
Descripci�n: Produce que el objeto que lo llama reciba
el focus.
Sintaxis:
nombreObjeto.focus()
, nombreObjeto es el nombre asignado en NAME a un objeto de tipo: pasword, select, text o
textarea.
M�todo del objeto: pasword, select, text y textarea
8.15 El m�todo fontcolor.
Descripci�n: Da el atributo de un determinado color de
fuente a un string. Se utilizara este m�todo junto con los m�todos write y writeln.
Sintaxis:
texto.fontcolor(color)
, texto es un string o propiedad de un objeto ya existente.
, donde color es un color valido: un string que represente un color predefinido (Ver
Ap�ndice I) o una expresi�n con el triplete RGB ("rrggbb").
M�todo del objeto: string
8.16 El m�todo fontsize.
Descripci�n: Da el atributo de un determinado tama�o
de fuente a un string. Se utilizara este m�todo junto con los m�todos write y writeln.
Este m�todo equivale al uso de la etiqueta <FONTSIZE=tama�o>.
Sintaxis:
texto.fontsize(tama�o)
, texto es un string o propiedad de un objeto ya existente.
, tama�o es el tama�o de la fuente que queremos, entre 1 y 7.
M�todo del objeto: string
8.17 El m�todo forward.
Descripci�n: Carga el URL siguiente en la lista de
history. Equivale a hacer uso del m�todo go de la siguiente forma: history.go(1) .
Sintaxis:
history.forward()
M�todo del objeto: history
8.18 El m�todo getDate.
Descripci�n: Devuelve el d�a del mes del objeto Date
especificado. Ser� un valor comprendido entre 1 y 31.
Sintaxis:
objetoDate.getDate()
M�todo del objeto: Date
8.19 El m�todo getDay.
Descripci�n: Devuelve el d�a de la semana del objeto
Date especificado. Ser� un valor comprendido entre 0 (Domingo) y 6 (Sabado).
Sintaxis:
objetoDate.getDay()
M�todo del objeto: Date
8.20 El m�todo getHours.
Descripci�n: Devuelve la hora de un objeto Date
especificado. El valor de salida ser� un n�mero entre 0 y 23.
Sintaxis:
objetoDate.getHours()
M�todo del objeto: Date
8.21 El m�todo getMinutes.
Descripci�n: Devuelve los minutos de un objeto Date
como un valor entre 0 y 59.
Sintaxis:
objetoDate.getMinutes()
M�todo del objeto: Date
8.22 El m�todo getMonth.
Descripci�n: Devuelve el mes de un objeto Date. La
salida es un valor entero entre 0 (Enero) y 11 (Diciembre).
Sintaxis:
objetoDate.getMonth()
M�todo del objeto: Date
8.23 El m�todo getSeconds.
Descripci�n: Devuelve los segundos entre 0 y 59 de un
objeto Date.
Sintaxis:
objetoDate.getSeconds()
M�todo del objeto: Date
8.24 El m�todo getTime.
Descripci�n: Devuelve el valor num�rico
correspondiente al objeto Date que lo llama, valor de salida va referido al 1 de Enero de
1970 a las 00:00:00 y es el valor en milisegundos, con signo positivo si la fecha es
posterior a la de referencia y con signo negativo si la fecha es antes a esta.
Sintaxis:
objetoDate.getTime()
M�todo del objeto: Date
8.25 El m�todo getTimezoneOffset.
Descripci�n: Devuelve el offset en minutos entre la
hora del objeto Date que llama a este m�todo y la hora GMT.
Sintaxis:
objetoDate.getTimezoneOffset()
M�todo del objeto: Date
8.26 El m�todo getYear.
Descripci�n: Devuelve el a�o del objeto Date que lo
llama. El valor de salida es el a�o menos 1900.
Sintaxis:
objetoDate.getYear()
M�todo del objeto: Date
8.27 El m�todo go.
Descripci�n: Carga el URL indicado en el �ndice que
se le pasa como argumento respecto del documento actual. Utiliza para ello la lista del
objeto history. Tambi�n podemos indicarle el URL directamente.
Sintaxis:
history.go(indice | "locationDestino")
, indice indica si nos movemos hacia delante (indice positivo) o hacia atr�s (indice
negativo) en la lista de documentos.
, locationDestino es parte o el total del URL al que se quiere ir.
M�todo del objeto: history
8.28 El m�todo indexOf.
Descripci�n: Devuelve el �ndice de un determinado
valor de un string. Los argumentos de entrada son el valor cuyo �ndice queremos conocer y
optativamente la posici�n a partir de la cual queremos buscar que por defecto es cero y
que podr� tomar un valor entre 0 y la longitud del string menos 1. Si no encuentra el
car�cter, devuelve -1.
Sintaxis:
texto.indexOf(valor [,indice])
, texto es un string o propiedad de un objeto ya existente.
M�todo del objeto: string
8.29 El m�todo link.
Descripci�n: Crea un enlace hipertexto para saltar a
otro URL. Se utilizara este m�todo con los m�todos write o writeln para representar un
enlace hipertexto en un document.
Sintaxis:
textoEnlace.link(atributoHREF)
, textoEnlace es un string o propiedad de un objeto ya existente. Es el texto que queremos
que el usuario vea para pulsar.
, atributoHREF es un string o propiedad de un objeto ya existente. Es el URL representando
el contenido de HREF en un
enlace usando <A>.
M�todo del objeto: string
Ejemplo: Los dos grupos de sentencias siguientes
producen el mismo resultado:
var textoEnlace = "E.T.S.I.T"
var atributoURL = "http://www.etsit.upv.es"
document.open()
document.writeln("Click para ir a " + textoEnlace.link(atributoURL))
document.close()
8.30 El m�todo pow.
Descripci�n: Realiza la potencia dada la base y el
exponente.
Sintaxis:
Math.pow(base, exponente)
, donde base y exponente son dos valores num�ricos.
M�todo del objeto: Math
8.31 El m�todo prompt.
Descripci�n: Este m�todo representa una caja de
dialogo con un mensaje y un campo de entrada.
Sintaxis:
prompt(mensaje [,entradaInicial])
mensaje es un string indicando el mensaje.
entradaInicial es un string o entero dando un valor inicial al campo de entrada. Si no se
especifica este valor, la caja de dialogo muestra el valor <undefined>.
M�todo del objeto: window
8.32 El m�todo random.
Descripci�n: Devuelve un valor aleatorio entre 0 y 1.
Este m�todo solo es utilizable en plataformas Unix.
Sintaxis:
Math.random()
M�todo del objeto: Math
8.33 El m�todo round.
Descripci�n: Redondea el n�mero de entrada al entero
mas pr�ximo. Si el n�mero tiene como valor decimal '.5', redondea al entero superior.
Sintaxis:
Math.round(numero)
M�todo del objeto: Math
8.34 El m�todo select.
Descripci�n: Selecciona el elemento que lo llama. Este
puede ser un objeto password, text o textarea.
Sintaxis:
nombreObjeto.select()
, nombreObjeto es el nombre asignado en NAME a un objeto de tipo: password, select, text o
textarea.
M�todo del objeto: password, select, text y textarea
8.35 El m�todo setDate.
Descripci�n: Fija el d�a del mes del objeto Date
especificado. Ser� un valor comprendido entre 1 y 31.
Sintaxis:
objetoDate.setDate(numero)
M�todo del objeto: Date
8.36 El m�todo setHours.
Descripci�n: Fija la hora de un objeto Date
especificado. El valor de entrada ser� un n�mero entre 0 y 23.
Sintaxis:
objetoDate.setHours(numero)
M�todo del objeto: Date
8.37 El m�todo setMinutes.
Descripci�n: Fija los minutos de un objeto Date como
un valor entre 0 y 59.
Sintaxis:
objetoDate.setMinutes(numero)
M�todo del objeto: Date
8.38 El m�todo setMonth.
Descripci�n: Fija el mes de un objeto Date. La entrada
es un valor entero entre 0 (Enero) y 11 (Diciembre).
Sintaxis:
objetoDate.setMonth(numero)
M�todo del objeto: Date
8.39 El m�todo setSeconds.
Descripci�n: Fija los segundos entre 0 y 59 de un
objeto Date.
Sintaxis:
objetoDate.setSeconds(numero)
M�todo del objeto: Date
8.40 El m�todo setTime.
Descripci�n: Fija el valor num�rico correspondiente
al objeto Date que lo llama, el valor de entrada va referido al 1 de Enero de 1970 a las
00:00:00 y es el valor en milisegundos, con signo positivo si la fecha es posterior a la
de referencia y con signo negativo si la fecha es antes a esta.
Sintaxis:
objetoDate.setTime(numero)
M�todo del objeto: Date
8.41 El m�todo setTimeout.
Descripci�n: Eval�a una expresi�n despu�s de hacer una pausa de un cierto tiempo de milisegundos.
Sintaxis:
identificadorTimeout = setTimeout(expr, milseg)
identificadorTimeout es un identificador que se usa solo por si nos interesa cancelar la
evaluaci�n usando el m�todo clearTimeout.
expr es un string, una expresi�n a evaluar.
milseg es el valor num�rico o string en milisegundos a esperar.
M�todo del objeto: frame y window
8.42 El m�todo setYear.
Descripci�n: Fija el a�o del objeto Date que lo
llama. El valor de entrada ser� un entero mayor a 1900.
Sintaxis:
objetoDate.setYear(numero)
M�todo del objeto: Date
La mayoria de las acciones de programa (al tratar con una aplicaci�n de WWW) deben ser activadas por eventos. Los eventos son acciones que ocurren como resultado de alguna acci�n realizada por el usuario. Un click de rat�n, la focalizaci�n de un campo en un formulario, modificar un campo de texto o mover el cursor son ejemplos de eventos (ver tabla).
La segunda forma de incrustaci�n de JavaScript en
documentos HTML consiste en la definici�n de manejadores de eventos en las etiquetas. La
sintaxis general es:
<ETIQUETA
manejador_evento = "C�digo JavaScript">
Donde ETIQUETA es cualquier etiqueta HTML que pueda
relacionarse con un evento y manejador_evento, el evento en s�.
Cada evento es es reconocido por ciertos objetos,
etiquetas HTML, como son:
A partir de la versi�n 3.0 de Netscape, onBlur y
onFocus se aplican tambien a ventanas y framesets.
El nombre de un manejador de eventos es el nombre del
evento,precedido por "on.". Por ejemplo, el manejador de eventos para focus en
onFocus.
La siguiente tabla muestra los nueve manipuladores de
eventos de JavaScript.
| Evento | Se da cuando | Manipulador de evento |
| abort | El usuario interrumpe la carga de una imagen | onAbort |
| blur | El usuario retira el foco de entrada del elemento form | onBlur |
| click | El usuario pulsa el rat�n sobre el elemento form o sobre un enlace | onClick |
| change | El usuario modifica el valor del texto, de un �rea del texto, o selecciona un elemento | onChange |
| error | La carga de un documento o imagen produce un error. | onError |
| focus | El usuario sit�a el foco de entrada en el elemento form | onFocus |
| unload | El usuario sale de la p�gina | onUnload |
| load | El usuario carga la p�gina en el Navigator | onLoad |
| mouseover | El usuario mueve el puntero del rat�n sobre un enlace | onMouseOver |
| mouseout | El usuario saca el rat�n de un �rea (imagemap) o enlace | onMouseOut |
| select | El usuario selecciona elementos form como campo de entrada (input) | onSelect |
| submit | El usuario envia un formulario | onSubmit |
| unload | El usuario abandona la p�gina | onUnload |
<input type="button" name="Pulsame" onClick="alert('Me has pulsado!');">
La instrucci�n anterior abrir� una ventana de aviso cuando el usuario pulse el bot�n.
<form name="miform" action="doit.cgi" onSubmit="confirmSubmission()">
La anterior instrucci�n llama a a la funci�n confirmSubmission para comprobar los valores de los campos antes de llamar al URL designado en el atributo action.
<input name="phone" onChange="checkPhone(this.form)">;
Esta instrucci�n llama a la funci�n checkPhone cuando el usuario deja de enfocar el campo de entrada (input) de texto y se mueve a otro campo. Esto permite preprocesar instant�neamente la informaci�n y comprobar el valor del campo con anterioridad al envio del formulario.
<body onLoad="alert('Bienvenido a mi p�gina')">
<body onUnload="alert('Gracias por tu
visita!')"
Con JavaScript podemos crear un gran numero de aplicaciones distintas gracias a la amplia coleccion de herramientas de que disponemos, con dichas herramientas conseguir� dotar a sus paginas Web de interactividad.
Entre las posibilidades que tenemos esta la de devolver al usuario una retroalimentaci�n instantanea cuando el usuario se mueve por encima de un objeto, entra en una nueva secci�n o incluso al abandonar su ubicaci�n.
Aqu� tenemos algunas aplicaciones (scripts) hechas utilizando el lenguaje Javascript.
- Formulario para correo electr�nico
- Ejemplo de men�
- Muestra un scroll en una caja de texto
- Hora y fecha del sistema
- Animaci�n en javascript
- Muestra el tiempo de duracion de la visita
Volver al Indice
Si desea mayor informaci�n o algunos enlaces m�s no
dudes en escribirme a:
[email protected]
Gracias.
Ultima Revisi�n: 01 de Marzo de 1,998
WebMaster: [email protected]
� Copyright 1998, UIGV