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:
s8073386@uigv.edu.pe
Gracias.
Ultima Revisión: 01 de Marzo de 1,998
WebMaster: postmast@uigv.edu.pe
© Copyright 1998, UIGV