Post on 12-Dec-2014
JavaScript y Java
Un poco de historia.
El JavaScript es un lenguaje de programación que surgió por la necesidad de ampliar las
posibilidades del HTML. En efecto, al poco tiempo de que las páginas web apareciesen, se hizo
patente que se necesitaba algo más que las limitadas prestaciones del lenguaje básico, ya que el
HTML solamente provee de elementos que actuan exclusivamente sobre el texto y su estilo, pero no
permite, como ejemplo sencillo, ni siquiera abrir una nueva ventana o emitir un mensaje de aviso.
La temprana aparición de este lenguaje, es posiblemente la causa de que se haya convertido en un
estándar soportado por todos los navegadores actuales, a diferencia de otros, que solo funcionan en
los navegadores de sus firmas creadoras.
Como tantas otras aportaciones al mundo www, fue Netscape quien inició la implementación de
JavaScript (aunque al principio no se llamaba así), y posteriormente, una alianza entre Netscape y
Sun, creadora del lenguaje Java, permitió que JavaScript tomase la debida consistencia,
definiéndose como una variante de Java, pero mucho más simple de usar. Esto no significa que
JScript sea Java simplificado o reducido. Salvo el nombre y la sintaxis, JScript no tiene mucho en
común con Java, pero cumple su propósito de lenguaje auxiliar del HTML.
Diferencias
Java es un lenguaje compilado, es decir, que una vez escrito el programa, y a partir de su código
fuente, mediante la compilación se genera un fichero ejecutable para una determinada plataforma
(Unix, Windows, etc.) que será completamente autónomo. Es un lenguaje de propósito general,
infinitamente más potente que JScript, con el que se han escrito infinidad de aplicaciones muy
conocidas, entre ellas los sistemas de telefonía móvil.
JavaScript es un lenguaje interpretado línea a línea por el navegador, mientras se carga la página,
que solamente es capaz de realizar las acciones programadas en el entorno de esa página HTML
donde reside. Sólo es posible utilizarlo con otro programa que sea capaz de interpretarlo, como los
navegadores web.
Este es un lenguaje orientado a objetos, es decir que la mayoría de las instrucciones que se emplean
en los programas, en realidad son llamadas a propiedades y métodos de objetos del navegador, y en
algunos casos del propio lenguaje. En Java, en cambio, no hay nada que no esté en un objeto.
¿Cómo se utilizan?
Java
El lenguaje Java es, posiblemente, el que tienen mayor portabilidad, lo que permite escribir
programas capaces de ejecutarse en cualquier plataforma, sin realizar apenas ningun cambio. Esta
portabilidad propició que el HTML implementase la posibilidad de incrustar programas escritos en
Java, que pueden funcionar de forma independiente del resto de la página. Estos programas
autónomos reciben el nombre de APPLETS, y se integran en el código HTML mediante el
elemento <APPLET>. Se utiliza así:
<BODY>
<APPLET CODE="AnimText.class" WIDTH=600 HEIGHT=40>
<PARAM NAME=text VALUE="Esto es una prueba de Applet Java">
<PARAM NAME=font VALUE="TimesRoman">
<PARAM NAME=type VALUE=1>
<PARAM NAME=fgcolor VALUE="yellow">
<PARAM NAME=min VALUE=12>
<PARAM NAME=max VALUE=36>
<PARAM NAME=naptime VALUE=100>
<PARAM NAME=align VALUE=left>
</APPLET>
..
..
..
</BODY>
Este es un applet que forma "olas" con un texto, y puedes probarlo desde aquí.
Analicémoslo brevemente:
El valor del atributo CODE es el nombre del programa: "AnimText.class". Los applets Java
cuando se compilan, no son ejecutables directamente desde el sistema operativo de tu máquina, son
compilados a nivel objeto (un nivel intermedio entre el código fuente y el código ejecutable) con la
extensión .class, y ejecutados a través del visualizador.
Los siguientes elementos son PARAM NAME, y puede deducirse fácilmente para que sirve cada
uno: definición del texto que va a aparecer, fuente de la letra, color del texto, etc..
Si pulsas aquí podrás ver el código fuente de este applet.
JavaScript
Para embeber un JavaScript en una página HTML, se utiliza el elemento <SCRIPT>. Este
elemento, habitualmente, va dentro del HEAD de la página, y no en el BODY.
Por ejemplo si escribes:
<HTML>
<HEAD>
<TITLE> Prueba</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("<CENTER><H3>Mi primer JavaScript</H3></CENTER>")
// -->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Tendríamos una página con el más elemental de los scripts. Fíjate en que después del elemento
SCRIPT se abre un comentario (<!-- -->)que contiene las instrucciones. Esto es para ocultar el
script a los visualizadores que no sean capaces de interpretarlo. Fíjate también en que antes del
cierre del comentario (-->) hay dos barras (//): Esto es para que el intérprete JScript no tome el
cierre como un instrucción y dé un error, es decir, se trata de un comentario propio de JScript, no de
HTML.
Puedes probar el script pulsando aquí.
En el índice encontrarás algunos ejemplos de páginas con programas JavaScript. Para ver cómo
estan hechos puedes abrirlos con el bloc de notas o cualquier otro editor.
Una de los problemas más graves que tiene el JavaScript es que cada navegador tiene un nivel de
lenguaje diferente, hay distintas versiones de lenguaje oficial, y hay versiones de lenguaje que sólo
funcionan en un navegador concreto. Cuando en una sesión los navegadores han cargado un cierto
número de páginas con código JavaScript (es decir, casi todas), es raro que todas ellas contengan
código cien por cien compatible con nuestro navegador, y éste acaba colgándose, no cargando
correctamente las páginas, o no ejecutando los programas JavaScript que éstas contienen. Como
siempre se ha dicho en esta guia, se debe probar el código en cuantos navegadores sea posible, y
tratar de escribir los programas de la forma más estandarizada posible.
¿Cómo se escribe el JavaScript?
El elemento <SCRIPT>
Los scripts de JavaScript se escriben de forma similar a los de VBScript, pero su sintaxis es mucho
más estricta, y esta es una de las causas más habituales de error. En JavaScript, a diferencia de
VBScript, no se pueden escribir mayúsculas alegremente. No es lo mismo MiFuncion() que
mifuncion(), y si escribimos, por ejemplo, Document.Write() no funcionará. Todo el código
deberá ir escrito entre <SCRIPT> y </SCRIPT>. Puesto que este elemento HTML es el mismo
que se emplea con otros lenguajes, como VBScript, es preciso indicar al navegador el lenguaje que
se va a utilizar al definir el script. Sea por ejemplo:
<SCRIPT LANGUAGE=JavaScript>
<!--
document.write("Esto ha sido escrito por JavaScript")
// -->
</SCRIPT>
Fíjate en que dentro de la etiqueta HTML <SCRIPT> y antes del código JavaScript propiamente
dicho, aparece el símbolo del comentario HTML <!--. Esto se hace para evitar que los navegadores
que no son capaces de interpretar el script muestren el código. Otra cosa importante son las dos
barras (//) que aparecen justo antes del cierre del comentario html: -->. Estas barras son el indicativo
de que lo que viene a continuación es un comentario también, pero del propio JavaScript en este
caso, y hay que ponerlas para evitar que el intérprete JavaScript tome el cierre del comentario html
como una instrucción y produzca un error de sintaxis. Esto es válido siempre que el comentario
vaya a tener una sola línea. Si va a tener más se utilizarán /* ... */. Así:
/*
Comentario 1
Comentario 2
*/
JavaScript entiende que una instrucción ha terminado cuando encuentra un retorno de línea, pero si
se desea escribir más de una instrucción en la misma línea hay que separarlas con ; al final de
cada instrucción, excepto la última que no lo necesita, aunque no ocurre nada si se escribe.
Los scripts pueden escribirse tanto en la <HEAD> como en el <BODY> de la página. Por claridad
a la hora de revisar el código, es preferible escribir todas las declaraciones y sentencias al principio
de la página, en la <HEAD>, aunque esto dependerá de las necesidades del programa, claro.
También, si ello es necesario, puede escribirse el código en los dos sitios a la vez. Por ejemplo, si
escribimos
<HTML>
<HEAD><TITLE>Prueba de JavaScript</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!--
document.write("Esto ha sido escrito por JavaScript desde
HEAD <BR>")
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!--
document.write("Esto ha sido escrito por JavaScript desde
BODY")
// -->
</SCRIPT>
<P>
Esto ha sido escrito por HTML.
</BODY>
</HTML>
Se obtiene:
Esto ha sido escrito por JavaScript desde HEAD
Esto ha sido escrito por JavaScript desde BODY
Esto ha sido escrito por HTML.
Otra particularidad de la sintaxis de JavaScript son las llaves: { }. Estas llaves hay que utilizarlas
siempre que el bloque de declaraciones vaya a tener más de una línea, y son obligatorias al definir
funciones. Pueden anidarse si el programa va a tener varios bloques, y siempre deben ser pares. Por
ejemplo, en la siguiente función:
<HTML>
<HEAD>
<TITLE>Capturar evento de boton</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!--
function mensaje() {
alert("Esto es un mensaje de JavaScript")
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick="mensaje()">
</FORM>
</BODY>
</HTML>
Fíjate en que la función es invocada al pulsar el botón del formulario, capturando un evento:
onClick, pero también es posible escribir directamente la instrucción en el punto de captura en
lugar de utilizar el elemento <SCRIPT>. Por ejemplo:
<HTML>
<HEAD><TITLE>Capturar evento de boton</TITLE></HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick=javascript:alert("Mi mensaje")>
</FORM>
</BODY>
</HTML>
Esta forma es aceptable si, como en el ejemplo, la función es muy simple.
Al igual que se puede hacer con las hojas de estilo en cascada (CSS), JavaScript permite que todo el
código (o parte de él) esté en un fichero independiente de la página html, lo que permite modificar y
mantener más rápidamente la programación, sin necesidad de editar muchos ficheros diferentes. El
fichero que contiene el código JavaScript, normalmente tiene la extensión .js
Sea el ejemplo anterior:
<HTML>
<HEAD>
<TITLE>Capturar evento de boton</TITLE>
<SCRIPT LANGUAGE=JavaScript src="fichero.js"></SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick="mensaje()">
</FORM>
</BODY>
</HTML>
Donde el contenido de fichero.js es:
function mensaje() {
alert("Esto es un mensaje de JavaScript")
}
Como puedes ver, en este fichero no hay que incluir el elemento <SCRIPT>, sino solamente
instrucciones JavaScript. Para mayor claridad de los ejemplos, se empleará este sistema siempre que
sea posible. Los programas JavaScript, como todos los programas, se comienzan definiendo las
variables, después las funciones, y a continuación la estructura del programa propiamente dicha, si
la hay. Recuerda que este es un lenguaje interpretado, es decir, que las instrucciones se van
cargando en memoria a medida que se leen, y por tanto es necesario tener cuidado con el orden en
que se escriben las variable y las funciones que serán invocadas desde el núcleo del programa. Por
ejemplo, si una instrucción que llama a una función se escribe antes que la función llamada, se
producirá un error, ya que en ese momento la función todavía no existe.
Variables
Las variables son espacios de memoria que contienen algun tipo de dato, al que se accede mediante
el nombre que se le asigne a la variable. En JavaScript no hay constantes como en VBScript. Los
nombres de las variables tienen que comenzar siempre por una letra o el signo del subrayado ( _ ) y
no pueden contener espacios en blanco ni caracteres que no sean letras o números, lo que excluye
letras acentuadas, eñes, cedillas, etc. Al escribirlos, si se utilizan mayúsculas, recordar que no es lo
mismo MiVariable que mivariable. Por supuesto, no puedes crear una variable con ninguna
palabra reservada del lenguaje, como return, if, case, etc.
Para crear una variable, simplemente se escribe su nombre, y si se desea, en ese mismo momento,
se le asigna un valor. Dependiendo del ámbito de actuación de la variable, habrá que utilizar, o no,
la instrucción var en el momento de crearla. Por ejemplo:
var MiVariable = 2004
También es posible definir varias variables en una misma línea:
var Variable1, Variable2, Variable3
Como puedes ver, la instrucción var es similar a la instrucción Dim de VBScript. Cuando una
variable es definida con la instrucción var en un bloque acotado por llaves { } (ámbito), solamente
estará disponible en ese bloque, y se la denomina variable de ámbito local. Si se declara sin la
instrucción var, es una variable de ámbito global, no importando dónde ha sido declarada, y estará
disponible en cualquier lugar de la página (a partir de donde ha sido declarada, pero no antes). Si se
declaran dos variables con el mismo nombre, pero una global y la otra local, la global será accesible
desde toda la página, excepto en el área donde "reina" la local, que impondrá su valor allí. No es
buena idea declarar variables duplicadas, salvo que sea estrictamente necesario, claro.
Las variables pueden contener cualquier tipo de dato, como cadenas, números, valores booleanos, o
incluso objetos. Se pueden cambiar los tipos de datos que contienen en cualquier momento sin
necesidad de redefinir la variable.
A los valores contenidos en las variables se les denomina literales. El literal es un concepto a veces
confuso. Si, por ejemplo, decimos que variable1 = "A" y variable2 = "B" podemos acceder a
"A" o a "B" bien invocando el nombre de las variables correspondientes, o invocando sus literales,
es decir, directamente sus valores. La suma (o concatenado en este caso) de variable1 + variable2
es lo mismo que la suma de sus literales: "A" + "B" = "AB"
Variables de cadena
Construir una variable conteniendo un string o cadena no tiene ninguna dificultad. Como ya sabrás,
un string o cadena es cualquier contenido acotado por comillas, simples ' o dobles ".
mivariable = "Hola"
También es posible concatenar dos o más cadenas usando el signo + :
mivariable = "Prueba de " + "concatenado"
Y este sería el resultado:
Prueba de concatenado
Si dentro de una cadena acotada por comillas, tanto simples como dobles, se incluye otra subcadena
acotada por las otras comillas, no se considera un concatenado. Por ejemplo, son válidas las
cadenas:
"Comillas dobles con 'simples' en el interior"
'Comillas simples con "dobles" en el interior'
Puesto que las cadenas se pueden definir tanto con comillas simples como dobles, puede ocurrir que
dentro de la cadena haya que poner uno de estos signos, o los dos, lo que provocaría un error de
sintaxis. Para resolver este problema se utilizan los "escapes", es decir, el mismo caracter que se
quiere escribir precedido de \ Esto evita que sea interpretado, no como el cierre de las comillas,
sino como un carácter normal. Así:
mivariable = "Prueba de " + "\"concatenado\" " + '\'doble\''
Y este sería el resultado:
Prueba de "concatenado" 'doble'
Esto mismo también es posible hacerlo usando el código hexadecimal del carácter deseado.
Normalmente se utiliza la codificación hexadecimal sólo con los caracteres que no admiten el
"escapado" (que son casi todos). Aplicándolo a las comillas sería así:
mivariable = "Prueba de " + "\x34concatenado\x34 " +
'\x27doble\x27 '
Además de las comillas y el código hexadecimal ya vistos, se puede "escapar" la misma barra
inclinada: \\, la \t para insertar un tabulador horizontal, y la \n para forzar una nueva línea.
Fíjate que en el caso de estos dos últimos, el escape funciona al revés que en las comillas o la barra
inclinada: En efecto, mientras que con las comillas el escape pretende que no se interprete su
cualidad para abrir o cerrar cadenas, con t o n lo que se hace es darles las cualidades que no tienen
para producir un tabulador o un salto de línea. Recuerda también que tanto el tabulador como la
nueva línea no tienen efectos visibles en los navegadores, por lo que su utilidad se limita al
formateo de texto dentro del entorno JavaScript exclusivamente. Al ser la barra inclinada \ el
controlador de escapes, si en una cadena hay que escribirla, deberá hacerse escpándose a sí misma.
Por ejemplo, si se escribe la típica ruta del directorio temp en el disco C:
document.write("C:\temp") se obtiene C: emp Como puedes ver, en este caso el error
es doble, ya que la barra no puede aparecer sin escape como tal carácter, y además, al estar junto a
la t, se ha interpretado como indicador de tabulación. La sintaxis correcta es:
document.write("C:\\temp") para obtener C:\temp
No hay que confundir los caracteres con escape con una de las pocas funciones intrínsecas de
JavaScript: escape() y su inversa: unescape(). La función escape() devuelve el código
ASCII decimal de los caracteres especiales, es decir cualquier caracter que no sea una letra
(mayúsculas o minúsculas), un número, o el punto, el guión, el subrayado o la arroba (Az 1-9 _ .
@). Todos los demás serán codificados. Por ejemplo, si se escribe:
document.write(escape("$ % & @"))
Se obtiene:
%24%20%26%20%25%20@
Como puedes ver, se codifica incluso el espacio en blanco (%20). Y con su inversa:
document.write(unescape("%24%20%26%20%25%20@"))
Se obtiene:
$ % & @
Procedimientos y funciones
En JavaScript no pueden definirse procedimientos Sub como en VBScript, pero sí funciones
(function). A cambio, aquí las funciones pueden realizar tanto acciones como devolver valores,
mientras que en VBScript solamente los procedimientos Sub pueden realizar acciones. Dentro de
una función no se puede definir otra función, pero sí pueden realizarse llamadas a cuantas sea
necesario. Para declarar una función simplemente se escribe la instrucción function y a
continuación el nombre que tendrá seguido de un par de paréntesis que contendrán los argumentos,
si los los hay. Por ejemplo:
function mensaje() y si tiene argumentos: function sumar(a, b)
Los argumentos pueden ser variables, o directamente cadenas, números e incluso objetos.
Después de haber definido el nombre de la función, se escribe un par de llaves, dentro de las cuales
irán todas las líneas que compongan el código de nuestra función. Por ejemplo:
function mensaje() {
alert("Esto es un mensaje de JavaScript")
}
Las funciones de javaScript reciben los argumentos por valor, es decir, que si la función cambia el
valor de los parámetros recibidos, este cambio no se reflejará globalmente, sino que sólo será
efectivo en el ámbito de la propia función, ni siquiera si la misma función es llamada desde otro
punto del programa.
No hay que confundir la declaración de funciones con el objeto Function() de javaScript. Fíjate en
que el nombre de este objeto comienza por "F" mayúscula. Se verá en el apartado Objetos.
Normalmente las funciones se invocarán capturando un evento, es decir, un suceso que se produce
y es detectado en la ventana del navegador. Uno de los eventos más comunes es el que detecta la
pulsación (onClick) del puntero del ratón sobre un objeto, por ejemplo, un botón de un formuulario.
En el siguiente ejemplo veremos cómo escribir una página que captura un evento en el botón de un
formulario que llama a una función. Esta función invoca el método alert del objeto window:
<HTML>
<HEAD>
<TITLE>Capturar evento de boton</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!--
function mensaje() {
alert("Esto es un mensaje de JavaScript")
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick="mensaje()">
</FORM>
</BODY>
</HTML>
Y al pulsar el botón, se obtiene:
Al ser capaz function de realizar acciones tanto como de devolver valores, es necesaria una
instrucción que le indique lo que debe hacer: return. Solamente si aparece esta instrucción al final
de la función, ésta devolverá el valor que tenga programado, si no, realizará las tareas que tenga
encomendadas, pero no se podrá obtener de ella una respuesta. Por ejemplo:
<HTML>
<HEAD><TITLE>Prueba de JavaScript</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!--
function sumar(a, b) {
sumar = a + b
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!--
document.write(sumar(2, 2))
// -->
</SCRIPT>
</BODY>
</HTML>
Se obtiene:
undefined
Como puedes ver, se ha definido una función con dos argumentos: a y b que serán sumados. No
obstante, cuando es invocada para escribir el resultado de la suma, se obtiene una desconcertante
respuesta: undefined . Esto es debido a que no se le ha dicho que entregue el resultado, sino
solamente que lo calcule. Pero si se escribe:
<HTML>
<HEAD><TITLE>Prueba de JavaScript</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!--
function sumar(a, b) {
sumar = a + b
return sumar
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!--
document.write(sumar(2, 2))
// -->
</SCRIPT>
</BODY>
</HTML>
Esta vez sí se obtiene lo esperado:
4
En el ejemplo, la función devuelve el resultado de la suma en una variable que se llama igual que la
propia función: sumar, pero también se puede hacer sobre una variable con distinto nombre. Por
ejemplo, funcionaría igual así:
<HTML>
<HEAD><TITLE>Prueba de JavaScript</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!--
function sumar(a, b) {
resultado = a + b
return resultado
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!--
document.write(sumar(2, 2))
// -->
</SCRIPT>
</BODY>
</HTML>
También es posible devolver directamente el resultado de la suma sin depositar el valor previamente
en ninguna variable ni en el nombre de la función:
<HTML>
<HEAD><TITLE>Prueba de JavaScript</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!--
function sumar(a, b) {
return a + b
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!--
document.write(sumar(2, 2))
// -->
</SCRIPT>
</BODY>
</HTML>
En JavaScript las funciones que tienen argumentos, como la del ejemplo, automáticamente son
provistas de un vector conteniendo los valores de los argumentos. Y te preguntarás qué es eso de un
"vector". Un vector es algo parecido a una matriz o array, y en este caso nos permite acceder a los
valores de los argumentos a y b por otra via que no es utilizarlos directamente. Estos vectores,
cuando hay que automatizar procedimientos, pueden resultar muy útiles. En el caso del vector de
nuestra función, y como todos los vectores y arrays, la numeración del índice comienza por el cero,
y por supuesto, el orden de los valores en el vector es el mismo que el de los argumentos en la
función, es decir, el índice 0 corresponde al argumento a y el índice 1 corresponde al b. Este
ejemplo es equivalente al anterior:
<HTML>
<HEAD><TITLE>Prueba de JavaScript</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!--
function sumar(a, b) {
return arguments[0] + arguments[1]
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!--
document.write(sumar(2, 2))
// -->
</SCRIPT>
</BODY>
</HTML>
La palabra arguments, como ya habrás supuesto, es reservada y no puede emplearse como nombre
de variable ni de función, y tiene una propiedad: length que nos indica la longitud del índice del
vector. Por ejemplo, si modificamos un poco la función anterior:
<HTML>
<HEAD><TITLE>Prueba de JavaScript</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!--
function sumar(a, b) {
return arguments.length
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!--
document.write(sumar(2, 2))
// -->
</SCRIPT>
</BODY>
</HTML>
Se obtiene 2 que es el número de argumentos que tiene la función. Fíjate en que este contador no
empieza en el cero, puesto que devuelve 2. Operadores de JScript
Tipos de operadores
En JavaScript encontramos cinco tipos de operadores:
Aritméticos
Lógicos
De comparación
Binarios
De asignación
Otros
•
•
•
•
•
•
Operadores aritméticos
Suma (+). Suma dos números: 3 + 2 = 5 . Si en lugar de números se suman cadenas, como por
ejemplo "A" + "B" = "AB" se produce una concatenación. Si alguno de los elementos a concatenar
no es una cadena de texto, queda convertido a cadena: "AB" + 123 = "AB123" .
Resta (-). Halla la diferencia entre dos números. Ejemplo A: 3-2 = 1 . Ejemplo B: (-1)-(-2)
= 1 .
Negativo (-). Indica el signo negativo de un número o una expresión: -3.
División (/). Divide dos números, obteniendo un cociente de coma flotante: 5 / 2 = 2.5 .
Fíjate en que el separador decimal es el punto.
Módulo aritmético %. Divide dos números, obteniendo un resto entero: 5 % 2 = 1 .
Multiplicación (*). Multiplica dos números: 3 * 2 = 6 .
Incrementos y decrementos (++ --). Incrementa o decrementa el valor de una variable numérica
en una unidad. No puede aplicarse a un literal. Pueden darse dos casos:
var A, B; B = 2;
A =
A =
++B
B++
En el primer caso, A = 3 Es decir, que el incremento de B ha sido el correcto, pero no así el
segundo, en el que A = 2. Esto se debe a que, en el primer caso, el incremento se efectúa antes de
que la expresión sea evaluada, y en el segundo, se incrementa después de la evaluación según
indica el orden de precedencia de los operadores (ver tabla al final de esta página). De igual forma,
para decrementos:
var A, B; B = 2;
A =
A =
--B
B--
En el primer caso resulta: A = 1 y en el segundo: A = 2
Operadores lógicos
Estos operadores tienen unas aplicaciones un tanto especiales, ya que no funcionan como los
aritméticos, conocidos por todos. Para comprender el funcionamiento de los operadores lógicos,
primero hay que saber qué son los estados lógicos de una expresión. Y te preguntarás que es eso de
"estados lógicos"... Esta es una cuestión un tanto filosófica, ya que el estado lógico de algo depende
de respecto a qué establecemos ese estado, y por tanto no siempre será el mismo. Dependerá del
entorno o contexto en el que se define y utiliza la expresión. En JavaScript hay tres posibles estados
lógicos: True (verdadero), False (falso) y Null (nulo, es decir que no se ha establecido estado
alguno por la razón que sea)
Por ejemplo, supongamos que hay que establecer el estado lógico de un material: El hierro.
Evidentemente, para establecer un estado lógico primero tenemos que decidir respecto a qué se
establece ese estado, ya que no podemos decir simplemente que el hierro es verdadero o falso. Nos
tendremos que referir a alguna cualidad del material y compararla con algo para establecer si el
estado es verdadero o falso.
Sea la expresión El hierro es un metal . Si tenemos que establecer el estado lógico de
esta expresión, la respuesta inmediata es Verdadero (True) y si la expresión fuese El hierro no
es un metal , inmediatamente pensarímos que el estado adecuado es Falso (False)
Una vez establecido el estado lógico de la expresión, los operadores lógicos nos permitirán tomar
decisiones mediante la verificación de ese estado, bien tomando uno solo, o agrupando varios de
ellos. Al igual que los operadores aritméticos, los operadores lógicos tienen un orden preestablecido
de evaluación que debe ser tenido en cuenta. Los estados lógicos, o mejor dicho, el resultado que
dan los operadores lógicos, pueden tratarse también como números booleanos, siendo True
equivalente a 1 y False equivalente a 0.
Negación lógica ! (Not). Establece una negación lógica en una expresión, es decir, que ante una
expresión, cuyo estado lógico es True (verdadero), el operador hará que devuelva False (falso).
El hierro es un metal = True.
! El hierro es un metal = False.
Hay tres posibles resultados aplicando este operador a una expresión:
Si la expresión = True el operador devuelve False.
Si la expresión = False el operador devuelve True.
Si la expresión = Null el operador devuelve Null.
Conjunción lógica && (And). Establece una conjunción lógica de dos expresiones, es decir, que
han de resultar True (verdadero) las dos expresiones para que el resultado final también lo sea.
El hierro es un metal = True.
El hierro es duro = True.
El hierro es un metal && El hierro es duro = True.
Hay 9 posibles resultados aplicando este operador a dos expresiones, aunque es posible incluir
cuantas sean necesarias:
Si la Expresión
Si la Expresión
Si la Expresión
Si la Expresión
Si la Expresión
Si la Expresión
Si la Expresión
Si la Expresión
Si la Expresión
Como puedes ver, si, y sólo si, ambas expresiones se evalúan como True, el resultado es True. Si
cualquiera de las expresiones es False, el resultado es False.
Disyunción lógica || (Or). Establece una disyunción lógica de dos expresiones, es decir, que el
resultado se dará evaluando una expresión u otra.
El hierro es un metal = True.
El hierro es duro = True.
El hierro es un metal || El hierro es duro = True.
Hay 9 posibles resultados aplicando este operador a dos expresiones, aunque es posible incluir
cuantas sean necesarias:
Si la Expresión
Si la Expresión
Si la Expresión
Si la Expresión
Si la Expresión
Si la Expresión
Si la Expresión
Si la Expresión
Si la Expresión
Como puedes ver, si cualquiera de las expresiones, o ambas, son True, el resultado es True.
Exclusión lógica ^ (Xor). Establece una exclusión lógica de dos expresiones, es decir, que el
resultado se dará evaluando una expresión u otra, y dará True si solamente una de ellas es True, lo
que implica la exclusión de la otra.
True && Expresión 2 = True el resultado es True.
True && Expresión 2 = False el resultado es False.
True && Expresión 2 = Null el resultado es Null.
False && Expresión 2 = True el resultado es False.
False && Expresión 2 = False el resultado es False.
False && Expresión 2 = Null el resultado es False.
Null && Expresión 2 = True el resultado es Null.
Null && Expresión 2 = False el resultado es False.
Null && Expresión 2 = Null el resultado es Null.
1
1
1
1
1
1
1
1
1
=
=
=
=
=
=
=
=
=
True || Expresión 2 = True el resultado es True.
True || Expresión 2 = False el resultado es True.
True || Expresión 2 = Null el resultado es True.
False || Expresión 2 = True el resultado es True.
False || Expresión 2 = False el resultado es False.
False || Expresión 2 = Null el resultado es Null.
Null || Expresión 2 = True el resultado es True.
Null || Expresión 2 = False el resultado es Null.
Null || Expresión 2 = Null el resultado es Null.
1
1
1
1
1
1
1
1
1
=
=
=
=
=
=
=
=
=
El hierro es un metal = True.
El hierro es duro = True.
El hierro es un metal ^ El hierro es duro = False.
Hay 4 posibles resultados aplicando este operador a dos expresiones:
Si la Expresión
Si la Expresión
Si la Expresión
Si la Expresión
Como puedes ver, si una y sólo una de las expresiones es True, el resultado es True. Si cualquiera
de las expresiones es Null, el resultado también será Null.
Operadores de comparación
Igualdad (==) Verifica la igualdad de dos expresiones sin tener en cuenta el tipo de dato.
Por ejemplo: 2 == "2" devuelve True
Igualdad estricta (===) Hace lo mismo que el anterior, pero verificando también que coincidan los
tipos de datos.
Por ejemplo: 2 === "2" devuelve False
Desigualdad (!=) Funciona de la misma forma que la igualdad, pero negándola.
Por ejemplo: 2 != "2" devuelve False
Desigualdad estricta (!==) Lo mismo que la igualdad estricta, pero negándola.
Por ejemplo: 2 !== "2" devuelve True
Y estos cuatro, seguro que ya sabes cómo funcionan:
Mayor que (>)
Mayor o igual que (>=)
Menor que (<)
Menor o igual que (<=)
Operadores que trabajan con bits
Existen algunos operadores que funcionan bit a bit, convirtiendo previamente los valores a binario.
Son los siguientes: <<
>>
>>>
&
|
^
Para comprender como trabajan estos complicados operadores lo mejor son los ejemplos:
Bitwise shift operators
9 << 2 = 36 con valor negativo: -9 << 2 = -36
Primero convierte a binario el primer operando 9 = 1001 A continuación añade a su
derecha el número de bits cero que indique el segundo operando (2). Resulta: 1001 00 = 36
9 >> 2 = 2 con valor negativo: -9 >> 2 = -3
Primero convierte a binario el primer operando 9 = 1001 A continuación, y comenzando de
derecha a izquierda, elimina el número de bits que indique el segundo operando (2). Resulta:
10 = 2
9 >>> 2 = 2 con valor negativo: -9 >>> 2 = 1073741821
Funciona igual que el anterior con números positivos. Con números negativos no está muy
True ^ Expresión 2 = True el resultado es False.
True ^ Expresión 2 = False el resultado es True.
False ^ Expresión 2 = True el resultado es True.
False ^ Expresión 2 = False el resultado es False.
1
1
1
1
=
=
=
=
claro lo que hace.
Bitwise logical operators
Al igual que los anteriores, estos operadores trabajan convirtiendo previamente a binario los
operandos, en la base de enteros de 32 bits. Para operar emparejan cada bit del primer operando con
su correspondiente del segundo operando, aplicando el operador uno a uno hasta obtener el
resultado final. Por ejemplo, el número 15 en binario es 1111 y el 9 1001. Si aplicamos los tres
operadores lógicos a esta pareja de valores, se obtiene:
15 & 9 = 9
15 | 9 = 15
15 ^ 9 = 6
Y seguramente te estarás diciendo que no entiendes nada... Analicemos uno.
Sea, por ejemplo, el último de ellos: 15 ^ 9 = 6. Más arriba se ha descrito este mismo operador, que
es Xor. Recordemos que establece una exclusión lógica de dos expresiones, es decir, que el
resultado se dará evaluando ambos valores, y dará True si solamente una de ellas es True.
Recordemos también que en binario 1 = True y 0 = False. Por tanto
15 =
1
1
1
1
9 =
1
0
0
1
------------------------------
False True True False
(1111 AND 1001 = 1001)
(1111 OR
(1111 XOR 1001 = 0110)
1001 = 1111)
o lo que es igual,
0110
No hay que confundir estos tres operadores con sus homólogos lógicos vistos más arriba, que se
representan con el mismo símbolo pero doble (excepto este).
Operadores de asignación
Asignación simple (=) Asigna un contenido a una variable o a un objeto.
Por ejemplo: mivariable = "Saludos"
En JavaScript el operador de asignación tiene la particularidad de que puede combinarse con
algunos de los operadores aritméticos, dando lugar a toda una familia de nuevos operadores:
A += B Ejemplo equivalente: A = A + B
A -= B Ejemplo equivalente: A = A - B
A /= B Ejemplo equivalente: A = A / B
A *= B Ejemplo equivalente: A = A * B
A %= B Ejemplo equivalente: A = A % B
A &= B Ejemplo equivalente: A = A & B
A ^= B Ejemplo equivalente: A = A ^ B
A |= B Ejemplo equivalente: A = A | B
Unos operadores atípicos
typeof Este operador nos indica el tipo de dato contenido en un variable, un literal o el resultado
de una expresión. Puede devolver seis valores diferentes: number, string, object,
function, boolean o undefined . Por ejemplo:
typeof 2 devuelve number
void Este es un curioso operador que se limita a impedir que todo funcione normalmente, es
decir, que una vez evaluadas la instrucciones, sus efectos o presentación de resultados serán
anulados. En principio podemos dudar de su utilidad, pero puede resultar muy útil en las ocasiones
en que, dependiendo de una evaluación previa, haya que deshabilitar algun objeto o impedir alguna
acción. Por ejemplo, bloqueando un formulario donde no se han cumplimentado algunos campos
obligatorios, o si algun valor es erróneo. El siguiente ejemplo genera un link que no funciona:
Este link no funciona
Y se escribe: <A HREF="javascript:void(0)">Este link no funciona</A>
new Sirve para crear una instancia de un objeto definido por el usuario, o también, para crear
alguno de los objetos intrínsecos de javaScript:, como son: Array, Boolean, Date,
Function, Math, Number o String. Lo veremos con más detalle en la página dedicada a
los objetos.
Como puedes ver, JavaScript dispone de una gran variedad de operadores. Cuando se escriben
expresiones lógicas complejas es recomendable usar los paréntesis para cada sub expresión
participante, y no olvides tener siempre en cuenta el orden de evaluación de los operadores. Es
relativamente fácil equivocarse al escribir expresiones complicadas, y es buena idea probar siempre
lo escrito con cuantas variaciones sea posible para asegurarse de que no se producen resultados
inesperados.
Orden de precedencia de los operadores
Los operadores de JavaScript tienen un orden establecido de evaluación. Este orden se denomina
orden de precedencia. En la tabla siguiente puedes ver este orden, teniendo presente que los
operadores que aparecen juntos en una misma fila de la tabla, no tienen prioridad entre ellos, sino
que se evaluarán en el orden en que hayan sido escritos en la expresión a evaluar:
Operador
. [] ()
++ -- - ~ !
delete new typeof void
* / %
+ - +
<<
< <=
== != === !==
&
^
|
&&
||
?:
=
,
>>
>>>
> >=
Descripción
Acceso a campos, índice de matrices y llamada a funciones.
Incremento +1, decremento -1, negativo, NOT, NOT lógico
borrado, crear objeto, mostrar tipo, indefinido
Multiplicación, división, módulo de división (resto)
Suma, resta, concatenación de cadenas
Bit shifting
menor que, menor que o igual, mayor que, mayor que o igual
Igualdad, desigualdad, identidad, no identidad
AND
XOR
OR
AND logico
OR logico
Condicional
Asignación
Evaluación múltiple
Los paréntesis se utilizan para alterar el orden natural de evaluación de los operadores. Una
expresión con paréntesis será evaluada completa antes de que su valor resultante sea utilizado por
el resto de instrucciones.
Para hacerse una idea más clara, veamos un ejemplo. Sea la siguiente expresión:
X = 78 * (96 + 3 + 45)
Como puedes ver, hay cinco operadores en este orden: =
De acuerdo con su orden de precedencia, se evaluarán en este orden: ()
Y esta sería la forma de operar paso a paso:
En primer lugar, se resuelve el paréntesis: 96 + 3 = 99 y a continuación 99 + 45 = 144
Ahora se multiplica: 78 * 144 = 11232
Por último se asigna el resultado: X = 11232
Instrucciones de JavaScript
if( condicion [else] [instrucciones]) Esta es sin duda la instrucción más
utilizada en programación. En efecto, raro es el programa, por pequeño que sea, que no la contenga
al menos una vez. Su funcionamiento es muy simple: es como un interruptor. Evalua un expresión y
si el resultado es true realiza las acciones que tenga programadas, y si es false realiza otras acciones
alternativas, o no hace nada, según convenga. Por ejemplo:
var x = 2
if (x == 3) {
document.write("x vale 3")
}
En este caso, al no devolver true la condición, no se obtiene ningún resultado. Si queremos una
alternativa en el caso de false, se escribe:
var x = 2
if (x == 3) {
document.write("x vale 3")
}
else {
document.write("x no vale 3")
}
Y se obtiene:
x no vale 3
Si la acción a realizar es breve, también puede escribirse en una sola línea:
var x = 2
if (x == 3) document.write("x vale 3")
Pueden anidarse cuantas instrucciones if sea preciso. Por ejemplo, si se escribe:
var x = 4
if (x < 3)
if (x == 2) document.write("x vale 2")
*
()
+
+
*
+
+
=
if
else
if
if
if
(x == 1) document.write("x vale 1")
(x == 3) document.write("x vale 3")
(x == 4) document.write("x vale 4")
(x == 5) document.write("x vale 5")
Y se obtiene:
x vale 4
Cuando escribas anidamientos, recuerda que si las instrucciones a realizar tienen más de una línea,
hay que escribir las correspondientes llaves { } para cada grupo de instrucciones en cada if, tal como
se ve en el primer y segundo ejemplos.
for() Esta instrucción crea un bucle, controlado por tres expresiones separadas por ; , y
seguidas de un bloque de otras instrucciones escritas dentro de un par de llaves { } que se ejecutarán
con cada ciclo del bucle. La sintaxis es:
for([contador;] [condicion;] [incremento]) {
.....
instrucciones
....
}
La primera expresión de los argumentos, contador, define el contador del bucle y lo inicializa. La
segunda, condicion, es donde se declara la condición o condiciones que se tienen que cumplir para
que el bucle termine. El bucle seguirá ejecutándose hasta que la expresión devuelva true. Y por
último, incremento indica el incremento que se aplicará al contador en cada paso. Por ejemplo:
for(var x = 0; x < 5; x++) {
document.write(x)
}
Se obtiene: 01234 Analicemos el ejemplo. La primera expresión de los argumentos, crea e
inicializa a cero el contador x: var x = 0;. La segunda establece que el bucle rodará mientras x
sea menor de 5: x < 5;. Y la tercera incrementa en 1 el contador con cada ciclo del bucle: x++.
Como ya se ha dicho en el apartado de los operadores de JavaScript, x++ es equivalente a x = x+1
for( in ) Al igual que la anterior, crea un bucle, pero esta vez solamente sirve para listar las
propiedades de un objeto. Por ejemplo:
Mi_array = new Array(2)
Mi_array[0] = "A"; Mi_array[1] = "B"; Mi_array[2] = "C"
for(var x in Mi_array) {
document.write("Mi_array" + x + " = " + Mi_array[x] + "<br>" )
}
Se obtiene:
Mi_array0 = A
Mi_array1 = B
Mi_array2 = C
Fíjate en que, a diferencia de la anterior, no es necesario inicializar el contador con ningun valor
(solamente crearlo) ni tampoco indicar el incremento ni el número de repeticiones del bucle, que se
repetirá las veces que indique el índice del objeto.
while( condicion) Es parecida a for(), pero en lugar de ejecutar el bucle hasta que se
cumple la condición, lo hace mientras (while) se mantenga el resultado inicial de la condición, es
decir, lo mismo pero al revés. Por ejemplo:
var x = 0
while( x < 3 ) {
x++
document.write("x = " + x + "<br>")
}
Se obtiene:
x = 1
x = 2
x = 3
Como puedes ver, el bucle se ejecuta mientras x es menor que 3, no siendo necesario definir en la
propia instrucción el incremento del contador, que está dentro de las instrucciones ejecutadas por el
bucle.
Tanto while() como for() pueden utilizar una instrucción que permite salir del bucle, si conviene,
antes de que se cumplan todas las repeticiones programadas en el contador. Se trata de break.
También pueden emplear la instrucción continue para alterar el contador sin detenerlo ni salir del
bucle. Veamos un ejemplo de uso de continue:
var x = 0
var y = 0
while (i < 5) {
x++
if (x == 3)
continue
y += x
document.write("x = " + x + "
}
Se obtiene:
x
x
x
x
=
=
=
=
1
2
4
5
Recuerda que x++ es equivalente a x = x + 1, lo mismo que y += x equivale a y = y + x.
Sabiendo esto, puedes ver claramente lo que hace el bucle en los dos primeros ciclos. Al llegar a la
tercera línea, en la que x = 3 vemos que hay un salto. En efecto: continue ha entrado en acción y el
control del bucle ha saltado desde la instrucción comenzando un nuevo ciclo sin ejecutar las dos
instrucciones que restaban, y que habrían aportado x = 3
y = 6. Luego el bucle termina
normalmente hasta que x = 5, pero los valores de y se han alterado respecto a los que serían sin
actuar continue.
De forma parecida trabaja break, pero en este caso en lugar de provocar un salto en el bucle y
continuar hasta el final previsto, el salto se hace fuera del bucle, quedando éste interrumpido:
y = " + y + "<br>")
y
y
y
y
=
=
=
=
1
3
7
12
var x = 0
while (i < 5) {
x++
if (x == 3)
break
document.write("x = " + x +
}
Se obtiene:
x = 1
x = 2
Como puedes ver, solamente se han completado dos ciclos del bucle de los cinco previstos. Estas
dos instrucciones pueden emplearse de la misma forma con la instrucción for().
"<br>")
this Es una palabra reservada que se utiliza para referirse al objeto actual en el que se está
ejecutando el código. Sea por ejemplo un formulario en el que el cliente debe escribir un valor, y
para comprobar que el valor es el correcto escribimos una función de verificación:
<HTML>
<HEAD> <TITLE>Pruebas JScript</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function validar(numero) {
if (numero.indexOf("2") != -1)
return true;
else {
alert('No has escrito un 2');
return false;
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Formulario"
METHOD="GET" ACTION " "
onSubmit="return validar(this.campo1.value)">
Escribe un 2: <INPUT NAME="campo1" TYPE="text"><BR>
<INPUT TYPE="submit" VALUE="Validar">
</FORM>
</BODY>
</HTML>
Fíjate en la instrucción this.campo1.value En realidad lo que hace this es sustituir a la referencia
real que sería: document.Formulario.campo1.value
with Esta instrucción sirve como referencia a un objeto, previamente declarado como objeto por
defecto, para evitar tener que referenciarlo en un conjunto repetitivo de instrucciones. Por ejemplo,
para obtener unos valores matemáticos:
var a, b, c
var r=10
a = Math.PI * r * r
b = r * Math.cos(Math.PI)
c = r * Math.sin(Math.PI/2)
Como puedes ver, hay que hacer referencia del objeto Math en todas las instrucciones. En cambio,
si se emplea with, simplemente se escribe:
var a, b, c
var r=10
with (Math) {
a = PI * r * r
b = r * cos(PI)
c = r * sin(PI/2)
}
var ver el apartado variables
function
comment ver el apartado ¿Cómo se escribe el JavaScript?
Objetos y funciones de JScript
Los objetos de JScript
JavaScript dispone de objetos intrínsecos del lenguaje, es decir, que ya existen y están disponibles
sin crearlos. No hay que confundirlos con los objetos del navegador, que tienen funcionalidades
distintas. Casi todos tienen propiedades y métodos, pero no todos tienen manejadores de eventos.
Algunos de ellos en otros lenguajes son funciones (por ejemplo, Date).
Todos los objetos de JavaScript comienzan por una letra mayúscula y las instrucciones por una
minúscula.
Array El array (o matriz) es un objeto que permite almacenar datos con un cierto orden.
Recuerda siempre que los arrays almacenan todos sus datos en memoria, y por tanto no es posible
utilizarlos para recuperar en otra sesión lo almacenado, no son ficheros. Al ser la memoria del
cliente el lugar donde se almacenan los datos, el acceso a ellos es muy rápido. Los datos
almacenados pueden ser de cualquier tipo: números, cadenas, objetos, etc., y pueden mezclarse.
Según la sintaxis que se utilice, el objeto funciona de distinta manera. Si se escribe:
Array(2) se crea un array vacío de longitud 3, es decir con tres celdas, ya que los índices
comienzan por el cero. En cambio, si se escribe Array("2") tendremos un array de una sola
celda, cuyo contenido es "2". Si en lugar de un solo número se escriben varios separados por comas,
también serán almacenados, y el array tendrá tantas celdas como argumentos se hayan escrito
dentro de los paréntesis, por ejemplo: Array(1, 2, 3, 4) crea un array con cuatro celdas
conteniendo 1, 2, 3 y 4 respectivamente. Puede ocurrir que al crear el array, no se tengan todavía
disponibles los datos que se guardarán en él. ¿cómo mover los datos después? cambiando de nuevo
la sintaxis:
Se crea el array: Array(2) y se le mueven los datos: Array[0] = "A"
"B" Array[2] = "C"
return ver el apartado funciones
Array[1] =
Fíjate en que para asignarle valores a las celdas, esta vez se hace escribiendo el número de índice de
la celda entre corchetes en lugar de paréntesis.
Aunque en estos ejemplos, por claridad, no se ha utilizado, al crear un array se debe emplear el
operador new, así como cuando haya que inicializarlo si ya estaba creado previamente: new
Array(2) .
Hasta aquí hemos visto que se invoca el array directamente, pero ¿qué ocurre si en nuestro
programa tenemos que crear más de uno? si no tienen un nombre que los distinga, al crear el
segundo, estaríamos reinicializando de nuevo el primero. Para resolver esto, se asigna el array a una
variable en el momento de crearlo, lo que nos permitirá invocarlo por su nombre para todo:
Se crea el array: Mi_array = new Array(2) y se le mueven los datos invocando su
nombre:
Mi_array[0] = "A"
Esta sintaxis sirve tanto para mover datos al array como para extraerlos si ya estaban almacenados.
El sistema de utilizar el índice, permite recorrer rápidamente el array con una instrucción de bucle
for. Como ya se ha dicho, en cada celda de un array se puede poner cualquier cosa, incluso otro
array. Esto permite crear arrays complejos de más de una dimensión, ya que JavaScript no tiene
instrucciones para crear arrays multidimensionales como VBScript. El siguiente ejemplo crea un
array de dos dimensiones utilizando instrucciones de bucle para recorrer los dos arrays:
Mi_array = new Array(1)
for (i=0; i < 2; i++) {
Mi_array[i] = new Array(2)
for (j=0; j < 2; j++) {
Mi_array[i][j] = "["+i+","+j+"]"
}
}
for (i=0; i < 2; i++) {
resultado = "Linea "+i+":"
for (j=0; j < 2; j++) {
resultado += Mi_array[i][j]
}
document.write(resultado,"<p>")
}
Y esto es lo que se obtiene:
Linea 0:[0,0][0,1]
Linea 1:[1,0][1,1]
Mi_array[1] = "B"
Mi_array[2] = "C"
La longitud de los arrays es dinámica. Es decir, que si se crea un array de una longitud cualquiera
(incluso cero) y después se mueve un dato a una posición de índice superior a la creada, el array se
redimensiona hasta el nuevo valor. Todas las posiciones entre el anterior límite y el nuevo,
lógicamente, estan vacias.
Propiedades
El objeto array tiene una propiedad: length que indica la longitud del índice. Por ejemplo, si se
crea el array:
Mi_array = new Array(2)
document.write(Mi_array.length)
Se obtiene: 2 Fíjate en que, aunque el resultado es 2, son 3 las posiciones disponibles, ya que el
índice comienza por el 0.
Métodos
Además de los 3 métodos comunes a otros objetos de JavaScript, el objeto array tiene otros 3
propios: join reverse sort Veamos cómo funcionan:
join(separador) Este método se utiliza para concatener todos los valores almacenados en el array en
un string. Opcionalmente se puede establecer un string separador entre valores, que por defecto es
la coma ,. Si se establece un separador que no es del tipo string, será convertido a string. Por
ejemplo:
Mi_array = new Array("Item1", 100, "Item3")
document.write(Mi_array.join(", "))
Se obtiene: Item1, 100, Item3
sort(orden) Como indica su nombre, sirve para ordenar los elementos del array según el modo
indicado por orden que puede ser una función, o una muestra de caracteres. Si se omite el modo de
ordenación, todos los valores son convertidos a string y ordenados según el diccionario inglés por
sus valores ASCII.
Mi_array = new Array("B", 100, "A")
document.write(Mi_array.sort())
Se obtiene: 100,A,B
reverse() Se utiliza para transponer los elementos de un array de forma inversa, es decir que el
primer elemento pasará a ser el último y viceversa. No es una ordenación, simplemente cambian de
sitio.
Mi_array = new Array("B", 100, "A")
document.write(Mi_array.reverse())
Se obtiene: A,100,B
Boolean Este objeto sirve para convertir cualquier valor a booleano, es decir, false o true. Por
ejemplo.
Mi_booleano = new Boolean("mi_valor")
document.write(Mi_booleano)
Se obtiene: true
Si el argumento "mi_valor" es omitido o su valor es cero, null, false o empty ("") el objeto
devuelve false. Cualquier otro valor, incluso la cadena "false" devuelve true.
Métodos
Tiene los tres métodos comunes de todos los objetos JavaScript.
Date Trabaja con fechas y horas. Por ejemplo:
Mi_fecha = new Date([argumentos])
document.write(Mi_fecha)
Si se omite argumentos se obtiene: Mon, 25 Apr 2005 11:43:55 GMT+0200.
Los argumentos son opcionales y sirven para inicializar el objeto. Si se omiten se inicializa con la
fecha y hora del sistema (cliente). También pueden escribirse de diversas formas:
Date("month day, year hours:minutes:seconds")
Date(year, month, day)
Date(year, month, day, hours, minutes, seconds)
Métodos
Se dispone de un gran número de métodos destinados a obtener o establecer las distintas partes de
una fecha/hora. Sea la variable Mi_fecha del ejemplo anterior. Para obtener alguna de las partes de
su valor se escribe el objeto seguido del método. Por ejemplo: Mi_fecha.getDate()
getDate El dia del mes. Es un número entre 1 y 31.
getDay Dia de la semana en número. El domingo = 0. Es un número entre 0 y 6.
getHours La hora. Es un número entre 0 y 23.
getMinutes Los minutos. Es un número entre 0 y 59.
getMonth El mes. Es un número entre 0 y 11. 0 = enero.
getSeconds Los segundos. Es un número entre 0 y 59.
getTime Es el número de milisegundos transcurridos desde el 1 de enero de 1970 a las
0:00:00 y la fecha/hora actual.
getTimezoneOffset Zona horaria. Devuelve la diferencia en minutos entre la hora
local y la GMT (Greenwich Meridian Time).
getYear El año. Dependiendo del valor devolverá dos o cuatro dígitos. Entre 1900 y
1999 devuelve dos y a partir de 2000 cuatro.
getFullYear Funciona como el anterior, pero con el año con cuatro dígitos siempre.
Solamente funciona con versiones modernas de navegador.
parse Funciona igual que getTime, pero en lugar de obtener los milisegundos hasta la
fecha/hora actual, lo hace hasta la contenida en un string del tipo "Dec 20, 2005" o "Mon, 29
Dec 1999 13:30:00 GMT."
•
•
•
•
•
•
•
•
•
•
•
Como ya has visto, cuando el objeto ya tiene una fecha almacenada se utilizan los métodos get...
para obtener algunas de las partes de esa fecha. Esta fecha se puede modificar en cualquier
momento, bien entera o algunas de sus partes, mediante los métodos set...:
•
setDate
setHours
setMinutes
setMonth
setSeconds
setTime
setYear
setFullYear
toGMTString
toLocaleString
UTC
•
•
•
•
•
•
•
•
•
•
Function([argumentos], "instrucciones") Curiosa forma de escribir funciones.
Este objeto puede contener una función que trabajará de forma análoga a las declaradas con la
instrucción function. Fíjate en que la diferencia de sintaxis entre ambas es simplemente que el
objeto se define con una "F" mayúscula y la instrucción con una "f" minúscula. La diferencia
práctica entre los dos procedimientos es que el objeto tiene propiedades que pueden invocarse, y la
declarada con la instrucción no. Por contra, el objeto es evaluado cada vez que se invoca, mientras
que la declarada con la instrucción es compilada, lo que la hace más eficiente. Los argumentos
pueden omitirse si no son necesarios, las instrucciones, evidentemente, no. La particularidad de esta
forma de escribir funciones es que tanto los argumentos (incluso aunque vayan a ser valores
numéricos) como las instrucciones van dentro de strings en lugar del típico par de llaves. Por
ejemplo:
var Mi_funcion = new Function("a", "b", "return (a * b)")
document.write(Mi_funcion(2,5))
Se obtiene: 10
Propiedades
Métodos
Los tres comunes de los objetos JavaScript.
Math Este objeto se utiliza para trabajar con constantes y funciones matemáticas. Esto hay que
hacerlo mediante sus propiedades y métodos. Por ejemplo, la propiedad PI:
document.write(Math.PI)
Se obtiene: 3.141592653589793
Las propiedades devuelven valores constantes:
Math.E = 2.718281828459045 La constante de Euler o número e.
Math.LN2 = 0.6931471805599453 Logaritmo natural de 2.
Math.LN10 = 2.302585092994046 Logaritmo natural de 10.
Math.LOG2E = 1.4426950408889634 Logaritmo en base 2 de e.
Math.LOG10E = 0.4342944819032518 Logaritmo en base 10 de e.
Math.PI = 3.141592653589793 Relación entre la circunferencia de un círculo y su
diámetro.
Math.SQRT1_2 = 0.7071067811865476 Raíz cuadrada de un medio (1/2).
Math.SQRT2 = 1.4142135623730951 Raíz cuadrada de 2.
•
•
•
•
•
•
•
•
Los métodos son funciones matemáticas que admiten argumentos. Además de los tres comunes
tenemos:
Math.sin(90) = 0.8939966636005579 Seno de un ángulo medido en radianes.
El rango devuelto estará entre -1 y 1.
Math.asin(-1) = -1.5707963267948966 Arco seno (en radianes) de un
número. Tiene que ser un valor entre -1 y 1. El resultado obtenido siempre estará dentro del
rango entre -pi/2 y pi/2 radianes. Si el valor está fuera de este rango devuelve NaN.
Math.cos(1) = 0.7853981633974483 Coseno (en radianes) de un número. El
resultado obtenido siempre estará dentro del rango entre -pi/2 y pi/2 radianes.
Math.acos(-1) = 3.141592653589793 = pi Arco coseno (en radianes) de un
número. Tiene que ser un valor entre -1 y 1. Si el valor está fuera de este rango devuelve
NaN (Not-a-Number).
Math.tan(90) = -1.995200412208242 Tangente de un ángulo medido en
radianes.
Math.atan(1) = 0.7853981633974483 Arco tangente (en radianes) de un
número. El resultado obtenido siempre estará dentro del rango entre -pi/2 y pi/2 radianes.
Math.atan2(20,50) = 0.3805063771123649 Devuelve, en un sistema
cartesiano de coordenadas, el ángulo en radianes formado por el eje trazado entre el origen y
el punto x,y definido por los argumentos de este método.
Math.abs(01234) = 1234 Valor absoluto de un número.
Math.ceil(20.5) = 21 Obtiene el número entero más pequeño posible que sea igual
o mayor que el argumento dado.
Math.floor(20.5) = 20 Al contrario que el anterior, obtiene el número entero más
grande posible que sea igual o menor que el argumento dado.
Math.exp(1) = 2.302585092994046 Números e.
•
•
•
•
•
•
•
•
•
•
•
Math.log(10) = 2.302585092994046 Devuelve el logaritmo natural (en base e)
del argumento dado.
Math.pow(10, 3) = 1000 Potencia. El primer argumento es la base y el segundo el
exponente.
Math.max(10, 5) = 10 Compara el valor de los dos argumentos, que tienen que ser
numéricos, y devuelve el mayor de ellos.
Math.min(10, 5) = 5 El inverso del anterior. Compara el valor de los dos
argumentos, que tienen que ser numéricos, y devuelve el menor de ellos.
Math.random() = 0.09618143970146775 Se obtiene un número aleatorio entre
0 y 1 cuyo origen es el reloj del sistema.
Math.round(2.5) = 3 Redondeo. Devuelve el número entero más próximo al
argumento dado. Si la parte decimal es .5 o mayor, se redondea por exceso, como en el
ejemplo. Si la parte decimal es menor que .5 se redondea por defecto.
Math.sqrt(2) = 1.4142135623730951 Raiz cuadrada de un número.
•
•
•
•
•
•
•
Number Objeto para trabajar con valores numéricos. Es poco utilizado.
Propiedades
MAX_VALUE
MIN_VALUE
POSITIVE_INFINITY
Métodos
Los tres comunes.
NaN
NEGATIVE_INFINITY
String Práctico objeto para trabajar con cadenas. Tiene una propiedad: length. Por ejemplo:
var Mi_cadena = new String("Esto es una prueba" )
document.write(Mi_cadena.length)
Se obtiene: 18 que como ya habrás supuesto es la longitud de la cadena dada.
Métodos
Además de los tres comunes hay un gran número de ellos. Utilizando el mismo texto del ejemplo
anterior, tendremos:
String.big() = Esto es una prueba Aumenta el tamaño del texto. El
tamaño es equivalente al obtenido con <FONT SIZE=4>
String.small() = Esto es una prueba Disminuye el tamaño del texto. El tamaño
es equivalente al obtenido con <FONT SIZE=2>
String.fixed() = Esto es una prueba Cambia el tipo de letra a paso fijo. Es
equivalente al obtenido con <FONT FACE="Courier">
String.sup() = Esto es una prueba Aplica el efecto superíndice al texto. Es
equivalente al obtenido con <SUP>
String.sub() = Esto es una prueba Aplica el efecto subíndice al texto. Es
•
•
•
•
•
equivalente al obtenido con <SUB>
String.fontcolor("ff0000") = Esto es una prueba Establece el
color del texto. Es equivalente al obtenido con <FONT color="ff0000">. Fíjate en que el
color hay que darlo en formato RGB hexadecimal.
String.size(5) = Esto es una prueba Cambia el tamaño del
texto. Es equivalente al obtenido con <FONT SIZE=x> donde x es un valor entre 1 y 7
String.blink() = Esto es una prueba Efecto de intermitencia, equivalente al
•
•
•
elemento <BLINK>
String.bold() = Esto es una prueba Aumenta el peso del texto. Es
equivalente al elemento <B>
String.italics() = Esto es una prueba Aplica el tipo de letra itálica al
texto. Es equivalente al obtenido con <I>
String.strike() = Esto es una prueba Aplica el tipo de letra tachado al
texto. Es equivalente al obtenido con <STRIKE>
String.charAt(0) = E Devuelve el caracter que haya en la posición del índice que
se indica. Para este método el índice comienza por el cero. No confundir con la propiedad
length que devuelve el número de caracteres que hay en la cadena, no un índice.
String.indexOf("t", [start]) = 2 Devuelve la posición del primer caracter
(solamente uno) indicado en el argumento que exista en la cadena. Para este método el
índice comienza por el cero. Por defecto comienza a buscar por el primer caracter de la
izquierda, y opcionalmente, se le puede indicar que comience la busca desde otra posición
con [start]. Si el carácter buscado no existe devuelve -1.
String.lastIndexOf(cadena, "prueba") = 12 Devuelve la posición de una
subcadena (o un solo caracter) dentro de la cadena principal. Comienza a contar por el cero.
Si el carácter o subcadena buscados no existen devuelve -1.
String.search(cadena, "prueba") = 12 Es exactamente igual que la
anterior, pero esta es una sintaxis más moderna que solamente funciona en versiones 4 o
superiores de navegador.
String.replace("prueba", "muestra") = Esto es una muestra
Reemplaza un substring, un caracter o incluso la cadena entera por otro/a. Si la subcadena a
buscar no existe devuelve la cadena original sin cambios. Cuando la primera ocurrencia es
encontrada y sustituida no se continua con el resto de la cadena.
String.split([separador]) Como su nombre indica, corta la cadena inicial y
coloca cada substring obtenido en una celda de un array. El corte se realiza por el caracter
indicado por separador. Por ejemplo:
•
•
•
•
•
•
•
•
•
var cadena = new String("Esto es una prueba")
var cadena2 = cadena.split(" ")
for (var i=0; i < cadena2.length; i++) {
document.write (cadena2[i] + " / ")
}
Se obtiene: Esto / es / una / prueba /
String.link(URL) Genera un enlace (link) a la dirección indicada por URL. Por
ejemplo:
•
var cadena = new String("Esto es una prueba")
var cadena2 = cadena.link("http://sestud.uv.es/manual.esp ")
document.write(cadena2)
Se obtiene: Esto es una prueba
String.toLowerCase() = esto es una prueba Convierte la cadena dada a
todo minúsculas.
String.toUpperCase() = ESTO ES UNA PRUEBA Convierte la cadena dada a
todo mayúsculas.
•
•
RegExp Abreviatura de Regular Expressions, es decir, expresiones regulares. Esta es una forma de
trabajar con cadenas muy utilizada en algunos lenguajes de programación, como perl, muchos
comandos del shell de Unix o Linux, etc. Consiste en ciertas convenciones para localizar cadenas o
subcadenas con características variadas y son independientes de las acciones que se realizarán con
ellas una vez localizadas. Se trata de establecer un patrón de búsqueda, que puede llegar a ser muy
complejo, para localizar cualquier cadena y sus variantes dentro de otra cadena. Por ejemplo,
partiendo de nuestra conocida cadena anterior: Esto es una prueba y su método search
String.search(/una/, "Esto es una prueba") = 8 Al aplicar este patrón se le
está preguntando si la cadena contiene la subcadena "una", y como la respuesta es true devuelve su
posición. Esta es una expresión regular muy simple, veamos otra más complicada:
String.search(/uno|[zxE]/, "Esto es una prueba") = 0 En este caso se
busca "uno", que no existe en la cadena, y/o cualquiera de los caracteres que hay entre los
corchetes. Como no existen z ni x, pero sí E, devuelve su posición que es la cero. Fíjate en que
para enlazar una parte de la expresión con la otra se utiliza el caracter | llamado "pipe", y se
pueden poner tantos como sean necesarios separando cada parte de la expresión regular. Si lo
indicado por el patrón es encontrado más de una vez, se devolverá la posición de la última
ocurrencia
Dentro de los corchetes, además de caracteres o números sueltos, se pueden poner rangos completos
indicando el primer caracter y el último separados por un guión: [a-z] o [0-9]. Esto significa
que se debe buscar si en la cadena se encuentra cualquier caracter entre a y z o entre 0 y 9. Si
lo que se buscan son mayúsculas, hay que indicarlo aparte: [A-Z] o dentro del mismo par de
corchetes: [zxy A-Z].
En el caso de que el caracter a buscar sea el propio guión - o algun caracter especial, según donde se
escriba habrá que ponerle el símbolo de "escape" (\) o no, como ya se dijo en el apartado ¿Cómo se
escribe el JavaScript?. Por ejemplo, si va el primero: /[\-A-Z]/ pero no es necesario
"escaparlo" si va el último: /[A-Z-]/
Además de para los caracteres especiales, el signo de escape se utiliza con algunos caracteres
normales que tienen un doble significado y sirven para definir conjuntos de caracteres:
/\w/ Cualquier caracter alfanumérico.
/\d/ Cualquier dígito.
/\s/ Cualquier caracter no visible, como el tabulador, el retorno o el espacio.
Otros caracteres especiales que no necesitan escape son:
/./ El patrón coincidirá con cualquier caracter, excepto un salto de línea.
/^[abc]/ Indica que el patrón buscado "abc" debe estar al comienzo de la cadena.
/[^abc]/ Acepta cualquier caracter excepto los contenidos entre los corchetes.
/$[abc]/ Indica que el patrón buscado debe estar al final de la cadena.
•
•
•
•
También se puede indicar cuantas veces debe existir el patrón en la cadena original:
/E+/ Significa que E debe aparecer al menos una vez.
/E*/ Cero o más veces.
/E?/ Cero o una vez.
/E{2}/ Dos veces.
/E{2,}/ Dos veces como mínimo.
/E{2,3}/ De dos a tres veces, inclusive.
Una vez definida la expresión regular, es posible aplicarle un modificador para que no sean tenidas
en cuenta las mayúsculas y minúsculas: /xyz A-Z/i No distinguirá entre mayúsculas y
minúsculas (insensitive).
Cuando se estan haciendo sustituciones en lugar de búsquedas el proceso se detiene al encontrar la
primera ocurrencia. Para evitar esto y que se hagan todas las sustituciones posibles hay que emplear
otro modificador:
cadena.replace(/a/g, "e") (global). cambia todas las "a" de la cadena por "e". Si es
necesario, también pueden ponerse los dos modificadores juntos, y tiene importancia en que orden
se escriben, normalmente será gi
En JavaScript admiten expresiones regulares algunos métodos del objeto String como search, split
y replace y por supuesto, el propio objeto RegExp, que no está muy claro para qué sirve. Las
expresiones regulares, en general, son bastante complicadas por lo poco descriptivas que son en sí
mismas. En su construcción tiene mucha importancia el orden en que se escriben las cosas. Hasta
que tengas cierta práctica, si no consigues que funcione a la primera, no desesperes, es normal.
Métodos comunes de los objetos
[objeto].eval(cadena) Este método, común a todos los objetos de JavaScript, tiene por
finalidad evaluar cualquier expresión contenida en una cadena, es decir obtener un resultado
numérico de la misma. Puede invocarse incluso sin hacer referencia a ningun objeto. Si dentro de la
cadena a evaluar hay instrucciones JavaScript, objetos o variables previamente definidas, eval
obtendrá sus valores ejecutando las instrucciones y evaluando los objetos previamente. Por ejemplo:
var x = 2; var y = 10; var z = "5"
document.write(eval("x * y + z + 1"))
Se obtiene: 2051
Como puedes ver, la idea es muy parecida a la presentada por el objeto Function que hemos visto
más arriba, que también trabaja con instrucciones dentro de una cadena.
objeto.toString() La finalidad de este método, común para todos los objetos, es convertir a
string cualquiera de ellos. Por ejemplo, sea el array
var meses = new Array("Enero","Febrero","Marzo")
Como ya sabemos, meses es un objeto, y no es posible concatenarlo con un string, ya que sus tipos
son diferentes e incompatibles, pero si se escribe:
document.write("Los meses son: " + meses)
Se obtiene: Los meses son: Enero,Febrero,Marzo
¿Qué ha ocurrido? ¿porqué no se obtiene un error? Pues no se produce error porque JavaScript ha
invocado automáticamente el método toString del objeto Array, a fin de intentar que los dos
elementos a concatenar sean del mismo tipo. Es decir, que ha hecho esto:
document.write("Los meses son: " + meses.toString()) Muy inteligente!
Por supuesto, podemos escribirlo directamente y no esperar a que lo arregle JavaScript.
objeto.valueOf() Este último método, común para todos los objetos, permite obtener el
valor original de un objeto después de haber sido convertido, por ejemplo, con el anterior método
toString. Al igual que el anterior, también será invocado de forma automática por JavaScript si es
necesario en el contexto de la instrucción.
Las funciones predeterminadas de JScript
A diferencia de otros lenguajes, JavaScript solamente tiene tres funciones intrínsecas. Esto significa
que cualquier utilidad que se precise programar hay que obtenerla escribiendo el usuario la función
correspondiente.
isNaN() Evalua el argumento dado, que puede ser un valor o una expresión y devuelve un
booleano que indica si puede considerarse como numérico o no numérico (Not a Number). Por
ejemplo, si se escribe:
document.write(isNaN(22)) Se obtiene: true
parseInt(string [,base]) Esta función analiza un string, y teniendo en cuenta la base
numérica indicada (si se indica), devuelve su valor entero. Si no se indica la base, JavaScript la
decidirá analizando los dos primeros caracteres de la cadena:
Si la cadena comienza por "0x," la base es 16 (hexadecimal).
Si la cadena comienza por "0," la base es 8 (octal).
Para cualquier otro valor la base es 10 (decimal).
•
•
•
En cualquier caso, aunque se indique la base, si el contenido de la cadena indica otra cosa, ésta será
cambiada. Los tres ejemplos siguientes devuelven 17:
parseInt("0x11", 16)
parseInt("0x11", 0)
parseInt("0x11")
Como puede ver, el principio 0x de las cadenas es decisivo a la hora de obtener el entero resultante.
Con otros contenidos, todos los ejemplos siguientes devuelven 15:
parseInt("F", 16)
parseInt("17", 8)
parseInt("15", 10)
parseInt(15.99, 10)
parseInt("FXX123", 16)
parseInt("1111", 2)
parseInt("15*3", 10)
Como puedes ver, si se encuentra un caracter que no puede ser considerado número en la base
establecida, se ignorarán todos los caracteres siguientes, y se devolverá el entero obtenido hasta ese
punto. Si el primer caracter de la cadena no puede ser considerado como número, la función
devuelve NaN. No se evaluan expresiones dentro de la cadena, pero sí expresiones numéricas sin
formato de cadena (en realidad tampoco sirven, pero JavaScript primero las evalua y después las
convierte en cadena).
parseFloat(string) De forma similar a la anterior, esta función analiza un string pero en
lugar de devolver un entero devuelve un decimal de coma flotante. Si el primer caracter de la
cadena no puede ser convertido a número, devolverá NaN. Los tres ejemplos siguientes devuelven
3.14:
parseFloat("3.14")
parseFloat("314e-2")
parseFloat("0.0314E+2")
El modelo de objetos de los navegadores
Los programas navegadores, como el Internet Explorer, Opera, o Netscape entre otros,
proporcionan una serie de objetos a los que se puede acceder mediante los scripts escritos tanto en
VBScript como JavaScript. Este modelo de objetos, ya de por sí bastante complejo, se termina de
complicar debido a que sus componentes se anidan unos sobre otros, es decir, que un objeto, a su
vez, está compuesto de otros objetos. A menudo, para llegar a una determinada propiedad de un
objeto, hay que referenciar una larga ruta hasta llegar al objeto padre, que es window. En el
siguiente gráfico tenemos la representación de la mayoría de estos objetos:
Se ve claramente que, en realidad, todos son sub-objetos del objeto window. En efecto, al tratarse
este objeto del propio navegador, o mejor dicho, de la ventana donde se ejecuta el navegador,
evidentemente, cualquier otro objeto debe estar integrado en él. Desafortunadamente, puede haber
diferencias entre el modelo de objetos de un navegador a otro, propiedades adicionales no
compartidas, sintaxis de referencia distinta, diferente versión del intérprete JavaScript, etc. Como
siempre, se debe probar el código escrito con varios navegadores, y a ser posible, con varias
versiones de los mismos. No hay que confundir los objetos del navegador con los objetos del propio
JavaScript que son completamente diferentes.
Se ha dicho que estos son objetos del navegador, pero en realidad, de forma directa, solamente los
dos primeros niveles de ellos lo son, excepto document. El resto son creados con las instrucciones
HTML de la página cargada, es decir, que los objetos contenidos en el objeto document
dependerán del código HTML que se escriba.
El objeto window
Es el objeto básico, y representa en sí mismo al propio navegador. Al ser el elemento principal del
modelo de objetos, para referirse a sus propiedades, métodos o eventos, no es necesario
referenciarlo específicamente. Como puedes ver en el esquema de objetos, hay cuatro sub-objetos
que pueden considerarse como sinónimos del objeto window: frames, top, self y parent que suelen
utilizarse en lugar de window. Por ejemplo, es lo mismo window.close() que
self.close(). En JavaScript un frame es también una ventana (window), pero con la
particularidad de que está contenida dentro de otra ventana (es decir, el objeto window. En realidad
todo está dentro de window). top hace referencia a la posición más alta en la lista de ventanas
abiertas, es decir, la primera de todas. parent se refiere a una ventana que contiene un elemento
frameset. Los cuatro, además, son considerados propiedades del objeto window. Si... esto es algo
complicado. Este objeto, como todos, tiene métodos, propiedades y eventos. Veamos los más
usuales:
MÉTODOS
open('url', 'name', ['features'] ) Permite abrir una nueva ventana en la que se está ejecutando una
nueva instancia del navegador (o simple ventana sin una nueva instancia, depende del navegador de
que se trate). Opcionalmente, también permite definir las características que tendrá la nueva
ventana, como son qué página mostrará, el nombre de la ventana y el aspecto que ofrecerá el
navegador. En el siguiente ejemplo se captura el evento onClick del botón de un formulario para
crear una nueva ventana:
<HTML>
<HEAD><TITLE>Objetos del navegador</TITLE></HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Abrir"
onClick="window.open('http://sestud.uv.es/manual.esp/',
'Prueba',
'top=100, left=100, width=300, height=300, location=no,
status=yes, ' +
'toolbar=no, menubar=no, scrollbars=no, resizable=no')">
</FORM>
</BODY>
</HTML>
Y después de pulsar el botón "Abrir" del formulario, obtendremos una nueva ventana con esta
apariencia:
Fíjate en las dos últimas líneas, las que corresponden al parámetro "features":
onClick="window.open('http://sestud.uv.es/manual.esp/',
'Prueba',
'top=100, left=100, width=300, height=300, location=no,
status=yes,' +
'toolbar=no, menubar=no, scrollbars=no, resizable=no')">
Como puedes ver, estan concatenadas por el signo +. En efecto, esto es javaScript, y no se pueden
truncar líneas ni dejar espacios innecesarios entre valores. Los valores de estos parámetros, además
de con yes/no, se pueden escribir con 0/1.
Por ejemplo: scrollbars=0. Por defecto, todos los valores son yes. El nombre de las ventanas
creadas no pueden contener espacios en blanco ni caracteres distintos de letras y/o números. Se
admite el signo de subrayado ( _ ) pero no el guión ( - )
close() Cierra una ventana. Por ejemplo:
<HTML>
<HEAD><TITLE>Objetos del navegador</TITLE></HEAD>
<BODY>
<FORM NAME="Formulario2">
<INPUT TYPE="Button" NAME="Boton2" VALUE="Cerrar"
onClick="prueba.close()">
</FORM>
</BODY>
</HTML>
Este método no funciona igual en todos los navegadores. Si escribes una página con el ejemplo
anterior y éste juntos, al pulsar el botón "Abrir" se abre una ventana llamada "prueba", y al pulsar el
botón "Cerrar" se cerrará la ventana "prueba", permaneciendo el navegador abierto con la página
inicial con los dos botones. Esto funciona correctamente con los navegadores Opera, Netscape y
Mozilla, pero falla con el IE. Esto se debe a que los tres primeros navegadores, aunque se abran
disferentes ventanas, solamente mantienen una instancia de programa ejecutándose en el sistema,
pero el IE ejecuta una nueva instancia de programa con cada ventana, lo que impide que la primera
conozca el nombre de las otras ventanas que hay abiertas. Para cerrar una ventana con el IE hay que
escribir:
onClick="window.close()">
Lo que provocará el cierre de la ventana donde estan los dos botones, pero permanecerá abierta la
ventana "prueba" que era la que se pretendía cerrar. Para conseguir lo mismo que los otros
navegadores, con el IE hay que esribir un complicado script en VBScript.
alert('mensaje') Muestra un mensaje de alerta que no ofrece respuesta alternativa del usuario, sino
solamente darse por enterado. Por ejemplo:
<HTML>
<HEAD><TITLE>Objetos del navegador</TITLE></HEAD>
<BODY>
<FORM NAME="Formulario">
<INPUT TYPE="Button" NAME="Boton" VALUE="Prueba"
onClick="alert('Esto es una prueba')">
</FORM>
</BODY>
</HTML>
Y después de pulsar el botón "Prueba" del formulario, obtendremos el mensaje:
confirm('mensaje') Muestra un cuadro de diálogo con dos botones que devuelven un valor
booleano cada uno (true o false) dependiendo del botón pulsado por el usuario. Por ejemplo:
<HTML>
<HEAD>
<TITLE>Prueba de mensaje</TITLE>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick="this.form.Campo1.value=confirm('¿Quieres
continuar?')">>
<INPUT TYPE="Text" NAME="Campo1">
</FORM>
</BODY>
</HTML>
Después de pulsar el botón "Prueba" del formulario tendremos esto:
Y después de pulsar el botón "Aceptar" del cuadro de diálogo tendremos esto:
Fíjate en que, en este caso, el valor devuelto es "Verdadero" en lugar de "true". Para capturar los
valores booleanos no se deben utilizar las frases que aparecen aquí, que han sido convertidas, sino
que se debe evaluar directamente el valor booleano devuelto por el objeto, sin conversiones que
dependan de la lengua utilizada por el navegador o configuraciones personales. Así:
if confirm('Quieres continuar?') {
this.form.Campo1.value='Ha pulsado Aceptar'}
else {
this.form.Campo1.value='Ha pulsado Cancelar'}
prompt('mensaje', ['propuesta']) Muestra un cuadro de diálogo con dos botones y un campo de
texto que, opcionalmente, puede tener una propuesta predefinida. Su funcionamiento es muy
parecido al método confirm(). Sea por ejemplo:
<HTML>
<HEAD>
<TITLE>Prueba de entrada</TITLE>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick="this.form.Campo1.value=prompt('Escribir un valor',
'')">>
<INPUT TYPE="Text" NAME="Campo1">
</FORM>
</BODY>
</HTML>
Después de pulsar el botón "Prueba" del formulario tendremos esto:
En el ejemplo, después de escribir un texto cualquiera y pulsar el botón "Aceptar", lo escrito será
recibido por Campo1, pero si se pulsa Cancelar, a diferencia del método confirm() que devolvería
false, lo que se recibe es null
setTimeout('instrucciones', espera) Evalua y ejecuta el código JavaScript contenido en
'instrucciones' después de transcurrido el tiempo, en milisegundos, indicado por espera. La
evaluación de las instrucciones solamente la hará una vez. Sea por ejemplo:
<HTML>
<HEAD>
<TITLE>Prueba de entrada</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function mensaje() {
alert('Esto es una prueba')
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick="setTimeout('mensaje()', 2000)">
</FORM>
</BODY>
</HTML>
Después de pulsar el botón "Prueba" del formulario, y transcurridos dos segundos, obtendremos:
clearTimeout(identificador) Después de haber utilizado el método setTimeout() anterior,
JavaScript mantiene memorizada la evaluación que realizó del parámetro 'instrucciones'. Si en
algun punto del programa es necesario repetir esa evaluación en lugar de utilizar la ya realizada, es
preciso inicializarla previamente. Para ello se utiliza clearTimeout(identificador). Para poder
hacerlo, es necesario que el método setTimeout() haya sido invocado mediante un identificador.
Así, y refiriéndonos al ejemplo anterior:
identificador=setTimeout('mensaje()', 2000)">
Y para inicializar la evaluación y poder realizarla de nuevo:
clearTimeout(identificador)
Evidentemente en este ejemplo no tiene sentido inicializar nada, ya que se trata de un mensaje fijo,
pero este método es imprescindible si las instrucciones ejecutadas por setTimeout() son expresiones
numéricas variables o contadores de tiempo.
elemento.focus() Fija el enfoque en un elemento de los contenidos en la ventana o en la propia
ventana. Habitualmente el enfoque se fija en los objetos creados con las instrucciones HTML, como
los formularios y todos sus sub-objetos (botones, listas, etc.). Hay que tener presente que una
ventana que está en primer plano puede no tener el enfoque, aunque lo normal es que lo tenga.
Excepto en el objeto window, generalmente el enfoque se fija en un objeto cuando éste es tocado
con el puntero del ratón (tocado, no pasado por encima) o bien al tabular desde el teclado. El objeto
window puede recibir el enfoque automáticamente nada más ser abierto, sin necesidad de pulsación
del ratón. Un objeto puede tener el enfoque y no parecerlo visualmente, por ejemplo los distintos
frames de una página, y en la que cada uno de ellos tiene el rango de window. El método contrario
de focus() es blur()
eval()
scroll()
Estos son los tres métodos comunes de todos los objetos de javaScript, y ya se describieron en ese
apartado.
toString()
moveBy(x,y) moveTo(x,y) Estos dos métodos sirven para mover una ventana, previamente
abierta, un número determinado de píxels hasta una determinada posición. Por ejemplo:
<HTML>
<HEAD>
<TITLE>Ventanas en movimiento</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function Mover()
{
Ventana.moveBy(5,5);
i++;
if (i<20)
setTimeout('Mover()',100);
else
Ventana.close();
}
</SCRIPT>
</HEAD>
<BODY>
<script LANGUAGE="JavaScript">
var dimensiones="left=100,top=100,width=100,height=100";
var i=0;
Ventana = window.open("","",dimensiones);
Ventana.document.write("Ventanas en movimiento");
Ventana.moveTo(400,100);
Mover();
</script>
</BODY>
</HTML>
EVENTOS
Mientras estas navegando por el ciberespacio, en la ventana de tu navegador van ocurriendo ciertos
sucesos o eventos que pueden ser capturados. Por ejemplo, cuando el navegador carga una página
se está produciendo un evento, cuando carga la siguiente se producen dos: uno al descargar la
antigua y otro al cargar la nueva, etc. Cada objeto tiene sus propios eventos. Para poder capturar un
evento es necesario un manejador de eventos. El objeto window tiene los siguientes manejadores de
eventos:
onLoad Como su nombre indica, se produce cuando el navegador carga una página. Por ejemplo:
<HTML>
<HEAD>
<TITLE>Prueba de entrada</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function mensaje() {
document.write('Prueba de evento onLoad')
}
</SCRIPT>
</HEAD>
<BODY onLoad="mensaje()">
</BODY>
</HTML>
Y este sería el resultado:
Prueba de evento OnLoad
onUnload Funciona justo al contrario que el anterior: se activa cuando el navegador descarga la
página actual, por ejemplo al intentar ir a otra. En ese momento se produce el evento. El siguiente
ejemplo abre una ventana predeterminada siempre que se abandona la página activa:
<HTML>
<HEAD>
<TITLE>Prueba de entrada</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function abrir() {
window.open('http://sestud.uv.es/manual.esp/')
}
</SCRIPT>
</HEAD>
<BODY onUnload="abrir()">
</BODY>
</HTML>
onFocus Este manejador de eventos controla el evento focus que se produce cuando un objeto
window, frame o form recibe el enfoque como consecuencia de una pulsación del ratón o por ser
invocado el método correspondiente. Por ejemplo:
<HTML>
<HEAD>
<TITLE>Prueba de entrada</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function abrir() {
window.open('http://sestud.uv.es/manual.esp/')
}
</SCRIPT>
</HEAD>
<BODY onFocus="abrir()">
</BODY>
</HTML>
onBlur Es el inverso del anterior. Este manejador de eventos controla el evento blur que se
produce cuando un objeto window, frame o form pierde el enfoque. En el siguiente ejemplo la
función abrir() será invocada al abandonar la página:
<HTML>
<HEAD>
<TITLE>Prueba de entrada</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function abrir() {
window.open('http://sestud.uv.es/manual.esp/')
}
</SCRIPT>
</HEAD>
<BODY onBlur="abrir()">
</BODY>
</HTML>
onError Este manejador controla el evento error. El error puede producirse mientras el
navegador está cargando una página. Durante el proceso de carga el navegador verifica la sintaxis
del código JavaScript y carga las imágenes que indique el código HTML. Un error de sintaxis
HTML no producirá un error de carga. Tampoco es un error capturable el que un enlace a otra
página falle, ya que eso es un error de navegador (o de navegación). El siguiente ejemplo muestra
un mensaje al cargar una página que intenta mostrar un gráfico que no existe:
<HTML>
<HEAD>
<TITLE>Prueba de entrada</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function mensaje() {
mensaje('Se ha producido un error de carga')
}
</SCRIPT>
</HEAD>
<BODY>
<IMG SRC="noexiste.gif" onError="mensaje()">
</BODY>
</HTML>
No hay que confundir estos mensajes controlados con los que produce la consola javaScript del
navegador cuando detecta un error en los programas que se estan cargando.
PROPIEDADES
name Es un string que contiene el nombre de la ventana. El nombre de la ventana se establece en
el momento de abrirla mediante el método window.open('url', 'name') y una vez abierta no puede
cambiarse. Recuerda que por defecto las ventanas abiertas directamente, como por ejemplo ésta que
estás leyendo, no tienen nombre definido.
status
document
location
Frame
frames
history
parent
self
top
opener
closed
length
Ejemplos de páginas con JavaScript
He aquí algunos ejemplos de páginas con "scripts" escritos en JavaScript (java
interpretado).
Ejemplos JavaScript
Un reloj en pantalla
Dar el nombre del mes
Una calculadora
Una agenda-calendario
Control de contenido de campos Sin envío.
Control de contenido de campos Envío final.
Texto que se desplaza en la ventana de estado
Texto que se desplaza en la ventana de estado opcionalmente
Formulario con lista de selección sin botón de submit
Imprimir desde una imagen
Texto que sigue al puntero en forma de cola de cometa
Ventana de texto que limita la longitud de la línea
Listado con puntero gráfico
Muestra de códigos de color
Link que se activa sólo pasando el ratón por encima
Rotación de textos en pantalla
Ver código fuente de una página cualquiera
Un menú flotante
Bloquear botón derecho del ratón
Bloquear botón derecho del ratón 2
Automatizar el marcado de opciones en formularios.
Impedir que se hagan dos selecciones en formularios.
Jugar al Tetris (Excelente!!)
Al abrir una nueva ventana, que ocupe toda la pantalla
Zoom de página
Juego de palabras
Enlaces a ficheros de sonido
Consola dinámica con varios ficheros multimedia
Y aquí hay muchos más (en inglés):
Dinamic drive
JavaScript Source
•
•