javascript y java

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



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



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

</HEAD>

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

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



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>


<SCRIPT LANGUAGE=JavaScript src="fichero.js"></SCRIPT>

</HEAD>

<BODY>




</FORM>

</BODY>

</HTML>

Donde el contenido de fichero.js es:



}

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


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:



}

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>

</SCRIPT>

</HEAD>

<BODY>




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



<!--

function sumar(a, b) {

sumar = a + b

}

// -->

</SCRIPT>

</HEAD>

<BODY>




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

</SCRIPT>

</HEAD>

<BODY>




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





</SCRIPT>

</HEAD>

<BODY>




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





</SCRIPT>

</HEAD>

<BODY>




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





</SCRIPT>

</HEAD>

<BODY>


<!--

// -->

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





</SCRIPT>

</HEAD>

<BODY>


<!--


// -->

</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 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 || 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 ^ 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")




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>


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:


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:


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>


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


<BODY>


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


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



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>



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>




alert('Esto es una prueba')

}

</SCRIPT>

</HEAD>

<BODY>



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>


function Mover()

{

Ventana.moveBy(5,5);

i++;

if (i<20)

setTimeout('Mover()',100);

else

Ventana.close();

}

</SCRIPT>

</HEAD>

<BODY>

<HTML>

<HEAD>




document.write('Prueba de evento onLoad')

}

</SCRIPT>

</HEAD>

<BODY onLoad="mensaje()">

</BODY>

</HTML>


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>



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>



function abrir() {


}

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



function abrir() {


}

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




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

•

•

javascript y java

Documents